防止在父状态更改时重新渲染

Question

背景：

我正在用react native和tensorflow HOC相机为食品构建一个实时图像分类应用程序。

我以本教程为基础，其中包括一个github repo，您可以通过Expo:进行测试

基本上，我希望相机预览保持实时，并实时显示tensorflow模型的预测。有一个函数可以调用每个帧并对其进行预测。我可以console.log()实时显示预测，但使用状态变量显示预测会导致相机重新渲染每个预测

这显然是糟糕的用户体验，因为只有包含预测的文本应该更改，相机不需要重新发送。我试过使用React.memo()，但它提供了一个"性能提示"，并且不能保证相机组件不会重新发送。

代码：

const handleCameraStream = async(tensor) => {
const prediction = await mobilenetModel.classify(tensor, 1);
console.log(`prediction: prediction}`);//works live
setWord(prediction);//causes rerender of camera
}

}

<View style={styles.container}>
//Want this to update continuously (every time word is updated)
<Text style={styles.wordTextField}>{word}</Text> 
//DON'T want the camera to re-mount every state change
<TensorflowCamera onReady={(imageAsTensors) => handleCameraStream(imageAsTensors)} /> 
</View>  
</View>

EDIT:我能够通过使用MobX实现一个简单的全局状态来调用setState。基本上，我在App.js中有一个类(WordStore)，它被传递到Camera组件和TextDisplay组件中。摄像头组件可以在不触发重新发送程序的情况下更改商店的属性，而TextDisplay可以在摄像头保持安装状态时获得这些更改。

您可以通过克隆此repo进行尝试。

简单的npm install和expo start

Answer 1

<TensorflowCamera onReady={(imageAsTensors) => handleCameraStream(imageAsTensors)} />

这可能会导致TensorflowCamera的不必要的重新呈现，因为您要在包含此代码段的组件的每个呈现上传入一个新函数。您可以直接传入handleCameraStream，也可以使用useCallback钩子将其包装。

Answer 2

您可以创建一个子组件并用memo包装，或者使用useEffect来避免在道具更改时重新渲染。

Answer 3

我能够通过使用MobX实现一个简单的全局状态来调用setState。基本上，我在App.js中有一个类(WordStore)，它被传递到Camera组件和TextDisplay组件中。摄像头组件能够在不触发重新发送程序的情况下更改商店的属性，并且TextDisplay能够在摄像头保持安装状态时获得这些更改。

您可以通过克隆此repo来尝试：https://github.com/JJwilkin/Pictionary-modification

npm install和expo start