reactjs - React hooks 组件确实使用 prevProps 进行了更新

Question

我正在将我的反应代码从类转换为钩子

我以前有过这样的事情

export default class Editor extends React.Component {
  constructor(props) {
    super(props)
    this.state = this.getStateObject()
  }

  getStateObject() {
    const { page } = this.props
    return {
      label: page.label || '',
      session: page.session || false
    }
  }

  componentDidUpdate(prevProps) {
    if (!_.isEqual(this.props.projects, prevProps.projects)) {
      this.setState(this.getStateObject())
    }
  }

当试图转向功能时，我做了这样的事情

export default function tabEditor ({page}:Page) {

  const [appPageInfo, setAppPageInfo] = useState({
      label: page.label || '',
      session: page.session || false
  })
  
 /* Equivalence in hooks
  componentDidUpdate(prevProps) {
    if (!_.isEqual(this.props.projects, prevProps.projects)) {
      this.setState(this.getStateObject())
    }
  }
*/


  const handleOnClickUpdate = () => {
    updateMobileAppPage(Object.assign({}, page, appPageInfo))
    close()
  }

但我无法确定componentDidUpdatein React hooks 的等价性。

Answer 1

您可以使用useEffect钩子添加将projects道具作为依赖项传递给它，如下所示：

useEffect(() => {
   // Whatever code you want to run if props.projects change
}, [props.projects]);

Answer 2

为了在 Hooks 中模拟 componentDidUpdate，您可以使用 useEffect，然后传入条件参数，只要参数更改，useEffect 就会运行该参数。下面的例子

useEffect(() => {
.......
//This useEffect will re-run whenever the parameter in the square bracket updates/changes.
}, [parameter])