useState Hook 在 setState 上渲染整个组件

Question

在下面的代码中，我使用了 2 个“useState”钩子。每当我调用这些钩子中的任何一个的“setState”函数时，都会重新渲染整个组件（检查“console.log”语句）。如果我为一个变量调用“setState”，我希望只渲染与该变量关联的元素，而不是整个组件

代码片段：

const App = () => {

  const [count, setCount] = React.useState(0)
  const [count2, setCount2] = React.useState(0)

  return (
    <SafeAreaView>
      <TouchableOpacity onPress={() => setCount(count => count + 1)}>
        {console.log('Counter 1')}
        <Text>{count}</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setCount2(count2 => count2 + 1)}>
        {console.log('Counter 2')}
        <Text>{count2}</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

Answer 1

在一个独立的组件中渲染每个Text ...这样，每当每个Counter 组件收到一个新道具时......它都会重新渲染。

 function FirstCounter ({ count }) {
  console.log('FirstCounter', count);
  return (  
    <Text>{count}</Text>
  );
}

export default React.memo(FirstCounter);

function SecondCounter ({ count }) {
  console.log('SecondCounter', count);
  return (  
    <Text>{count}</Text>
  );
}

export default React.memo(SecondCounter);

function App() {
  /** state is it was */
  const [count, setCount] = React.useState(0);
  const [count2, setCount2] = React.useState(0);

  return (
    <SafeAreaView>
      <TouchableOpacity onPress={() => setCount(count => count + 1)}>
        <FirstCounter count={count} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => setCount2(count2 => count2 + 1)}>
        <SecondCounter count={count2} />
      </TouchableOpacity>
    </SafeAreaView>
  );
}