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

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

希望能有所帮助。无需怀疑