React Native中为何useState无法实现组件可见性切换？

• 行内样式传参格式错误：React Native的style属性只接受样式对象、样式表引用、或者由前两者组成的数组。你写的style={{isDisabled}}是JS的属性简写语法，等价于传入{ isDisabled: "opacity:0" }，这根本不是RN可识别的合法样式键值对，框架会直接忽略无效样式。
• 状态设计冗余且不合理：你不需要把整段样式字符串存在state里，state只需要存最小粒度的动态数据——也就是「邮箱格式是否合法」这个布尔值即可，样式完全可以在渲染时根据这个布尔值直接推导，额外写useEffect监听email修改状态属于无意义的多余逻辑，还会增加额外渲染次数。
• 透明度取值错误：React Native中opacity样式的合法取值范围是0~1的数值，0代表完全透明，1代表完全不透明，你写的opacity:100属于非法取值，框架会自动按1处理。

// 仅存储邮箱校验结果的布尔状态，无需存样式
const [isEmailValid, setIsEmailValid] = React.useState(true);

return (
  <View style={styles.container}>
    <TextInput 
      style={styles.textInput}
      placeholder="Email address"
      value={email}
      onChangeText={text => {
        setEmail(text);
        // 输入时同步更新校验结果，无需单独使用useEffect
        setIsEmailValid(regexEmail.test(text));
      }}
    />
    {/* 传入合法的行内样式对象，通过透明度控制显隐 */}
    <EvilIcons 
      name="exclamation" 
      size={24} 
      color="orange" 
      style={{ opacity: isEmailValid ? 0 : 1 }}
    />

    <TextInput 
      style={styles.textInput}
      placeholder="Password"
      value={password}
      onChangeText={text => setPassword(text)}
      secureTextEntry
    />
    
    <TextInput 
      style={styles.textInput}
      placeholder="Confirm password"
      value={confirmPassword}
      onChangeText={text => setConfirmPassword(text)}
      secureTextEntry
    />

    <Button 
      disabled={submitDisabled}
      style={styles.buttonLogin}
      title='Register'
      onPress={submitRegister}
    />
  </View>
)

根据场景选即可：

• 透明度控制：也就是上面示例用的opacity: 0 | 1，切换时元素始终占据布局位置，不会触发周边元素位移，适合输入框旁提示图标、角标这类固定位置的提示元素
• 条件渲染：写法为{!isEmailValid && <EvilIcons ... />}，条件不满足时元素直接从组件树卸载，不占据布局位置，适合显隐频率不高、不需要保留组件状态的场景
• display属性控制：写法为style={{ display: isEmailValid ? 'none' : 'flex' }}，效果和条件渲染类似，元素隐藏时不占布局位置，但不会从组件树卸载，适合显隐切换非常频繁的场景，能减少重复挂载卸载的性能开销

内容的提问来源于stack exchange，提问作者Rollor