React函数组件中如何阻止setState触发子组件DisplayJobContent重渲染

核心原因 #

你之前用React.memo、shouldComponentUpdate没生效，甚至输入框值被清空，本质是两个写法问题：

• 致命错误：组件嵌套定义
  你把ApprovedJob、ActiveJob两个组件直接写在了DisplayJobContent的函数体内部。每次DisplayJobContent触发渲染，这两个组件都会生成全新的函数引用，React会将其识别为完全不同的组件类型，直接销毁旧组件实例、挂载新实例——这个过程不是普通重渲染，是完整的卸载+重挂载，不仅会绕开所有memo类优化，组件内部的所有状态（包括Textfield里已经输入的内容）都会被直接重置，这就是你输入值丢失的根本原因。
• React默认渲染机制：父组件状态更新时，默认会递归渲染所有子组件，哪怕子组件接收的props没有实际变化，没有做memo优化的组件都会跟着重渲染。

修复步骤 #

1. 挪出嵌套定义的组件 #

永远不要在一个组件的函数体内部定义另一个组件，把ApprovedJob、ActiveJob移到DisplayJobContent外层，组件需要用到的内部值通过props传递：

// 挪到外层，需要的值通过props传入
function ActiveJob({ value, /* 其余所需参数 */ }) {
  return <Textfield value={value} /* 其余props */ />
}

function ApprovedJob(/* props */) {
  // 原有业务逻辑
}

function DisplayJobContent(props) {
  const [value, setValue] = useState();

  const submit = () => {
    // 原有提交逻辑
    props.handleBarMessage('Job Content Submitted');
  }

  return (
    <div>
      {props.jobStatus > 4 ?
        <ApprovedJob /> :
        <ActiveJob value={value} />
      }
    </div>
  )
}

2. 给目标组件加React.memo优化 #

你传给DisplayJobContent的handleBarMessage是useState返回的setter函数，React官方保证这个函数的引用在组件全生命周期内稳定不变，不会随重渲染生成新引用。直接给DisplayJobContent套一层React.memo，就能在父组件更新barMessage、且DisplayJobContent的props无变化时，跳过该组件的非必要重渲染：

const DisplayJobContent = React.memo(function DisplayJobContent(props) {
  // 上述组件逻辑保持不变
});

3. 后续扩展注意事项 #

如果之后你需要给memo包裹的组件传入自定义回调函数，不要直接写内联函数，要用useCallback包裹回调，保证回调的引用稳定，否则memo会因为props引用变化判定需要重渲染，导致优化失效。

额外提醒：你代码里的Bar组件属性存在拼写错误，写的是massage（词义为按摩），正确写法应该是message，建议同步修正避免逻辑bug。

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