功能组件不会在道具更改时重新渲染答案

【问题标题】：functional component doesn't re-render on props change功能组件不会在道具更改时重新渲染
【发布时间】：2023-02-15 07:04:25
【问题描述】：

在下面的代码中，每当我从父级获得新道具时，新道具都会正确记录在控制台上，但渲染的 HTML 在初始渲染后永远不会更新：

export default function(props) {
  const [state, setState] = useState(props)
  
  // initially, props.something is defined
  // every time props changes (from the parent) props.something is redefined as expected and logged here
  console.log(props.something)
  
  // initially, props.something is rendered correctly
  // every time props.something changes (from the parent) the HTML never updates
  return (
    {state.something && <div>{state.something}</div>}
  )
}

我已经尝试使用useEffect()，尽管我看不出有什么意义，但它并没有解决任何问题。

【问题讨论】：

标签： reactjs

【解决方案1】：

状态不会因为 props 改变而更新，这就是为什么你需要useEffect。

export default function(props) {
  const [state, setState] = useState(props)

  useEffect(() => {
    setState(props.something)
  }, [props.something])
  
  // initially, props.something is defined
  // every time props changes (from the parent) props.something is redefined as expected and logged here
  console.log(props.something)
  
  // initially, props.something is rendered correctly
  // every time props.something changes (from the parent) the HTML never updates
  return (<div>{state.something}</div>)
}

将 props.something 添加到数组中作为 useEffect 的第二个参数告诉它监视对 props.something 的更改并在检测到更改时运行效果。

更新：在这个具体的例子中，没有理由将道具复制到状态，直接使用道具即可。

【讨论】：

我认为既然每次都会调用整个函数（组件），那么每次都会重置状态。
如果每次函数渲染时状态都被重置，那么你就不需要状态，你可以直接使用局部变量（或 props.something）。状态的全部意义在于功能组件可以在渲染之间保存状态。
那是真实的。我正在努力思考来自 Ember 的 React。感谢您的澄清，这是有道理的。
+1 但是：它只是我，还是感觉更干净而不是通过 Context 提供程序（例如 useContext 钩子）提供数据，这样您就可以避免将道具复制到状态？
对于这一件事，上下文似乎有点矫枉过正。但是，在这个具体的例子中，没有理由将 props 复制到 state，直接使用 prop 即可。更新。

【解决方案2】：

在您的示例中，您仅在设置初始值时将道具复制到状态一次。

不过，将 props 复制到组件状态几乎不是一个好主意。你可以阅读它react docs

【讨论】：