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 组件收到一个 new-prop .. 它将重新渲染。

 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>
  );
}