如何在反应原生功能组件中创建有价值的并且在更新时不会触发重新渲染？

Question

在这种情况下，当我调用 updateNumber() 时它会再次触发渲染，那么如何创建仅用于保存数据的有价值的东西呢？

function test() {
   const [cartNum, setCartNum] = useState(0);

  function updateNumber() {
    setCartNum(number +1);
  }
  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}

Answer 1

使用useRef挂钩

下面的例子

// Call on top of component 
const number = useRef(0);

const updateNumber = ()=>{
    number.current++;
}

Answer 2

有两种方法可以更新而不是重新渲染：

// by using normal variables
function test() {
   let number = 0;

  function updateNumber() {
    number++
  }
  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}

// or as carlos mentioned by using ref

function test() {
   const number = useRef(0);

  function updateNumber() {
   number.current++;
  }
  return (
    <View style={{ flex: 1 }}>
       <TouchableOpacity onPress={updateNumber}>
          <Text>
            {Math.random()}
          </Text>
      </TouchableOpacity>
    </View>
  );
}

希望能帮助到你。 随时怀疑