React Hook 的 componentWillReceiveProps、componentDidUpdate [英] componentWillReceiveProps, componentDidUpdate for React Hook

问题描述

我遇到了两个挑战:

• 即使根据 React 指南，不鼓励派生状态，但某些边缘情况仍然需要它.
  就带有 React Hook 的功能组件而言，React Hook 的等效实现是什么，如果我确实需要派生状态?在类组件中，将在每个父渲染的 componentWillReceiveProps 中更新

见下面的代码示例:

class App extends Component {构造函数(道具){超级(道具)；this.state = {计数:props.count >100 ?100 : props.count,}}/*这里使用React Hook的等效实现是什么componentWillReceiveProps*/componentWillReceiveProps(nextProps) {if (nextProps.count !== this.props.count) {this.setState({计数:nextProps.count >100 ?100 : nextProps.count});}}使成为() {返回 ( <div >{this.state.count} </div>);}}导出默认应用；

• 至于componentDidUpdate，componentDidUpdate在使用React Hook时有它的对应物，你必须像这样使用它，

   React.useEffect(() => {返回 () =>{};}, [parentProp]);

  useEffect 的第二个参数确保代码仅在 prop 更改时执行，但是 如果我想根据多个相应的 props 更改执行相应的任务怎么办?如何使用useEffect完成它?

见下面的代码示例:

class App extends Component {/*这里使用带有React Hook的函数式组件的等效实现是什么*/componentDidUpdate(prevProps, prevState) {if (prevProps.groupName !== this.props.groupName) {console.log('让'是说，只有当 groupName 不同时，我才想在这里做一些任务');} else if (prevProps.companyName !== this.props.companyName) {console.log('让'是说，只有当 companyName 不同时，我才想在这里做一些不同的任务');}}使成为() {/* 为简单起见，忽略渲染代码*/返回空；}}导出默认应用；

解决方案

相当于旧的 componentWillReceive 道具的 react 钩子可以使用 useEffect 钩子来完成，只需指定我们想要监听依赖数组变化的 prop.

即:

export default (props) =>{useEffect(() => {console.log('计数器更新');}, [道具.计数器])return 
Hi {props.counter}
}

对于 componentDidUpdate 只需省略依赖数组，useEffect 函数将在每次重新渲染后调用.

即:

export default (props) =>{useEffect(() => {console.log('计数器更新');})return 
Hi {props.counter}
}

I run into two challenges:

• Even if, as per React guideline, derived state is discouraged, but some edge cases still need it.
  In terms of a functional component with React Hook, What is the equivalent implementation with React Hook, If I do need derived state ? which in class component, will be updated in componentWillReceiveProps on every parent render

see below code sample:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.count > 100 ? 100 : props.count,
    }

  }

  /*What is the equivalent implementation when React Hook is used here componentWillReceiveProps*/
  componentWillReceiveProps(nextProps) {
    if (nextProps.count !== this.props.count) {
      this.setState({
        count: nextProps.count > 100 ? 100 : nextProps.count
      });
    }
  }

  render() {
    return ( <
      div > {
        this.state.count
      } <
      /div>
    );
  }
}

export default App;

• As for componentDidUpdate, componentDidUpdate has it's counterpart when React Hook is used ,you have to use it like,

    React.useEffect(() => {
      return () => {
  
       };
    }, [parentProp]);
  

  the Second param for useEffect makes sure code is executed only when prop changes, but what if I want to do respective tasks based on multiple respective props changes? how to get it done with useEffect?

see below code sample:

class App extends Component {


  /*What is the equivalent implementation when functional component with React Hook is used here */
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.groupName !== this.props.groupName) {
      console.log('Let'
        's say, I do want to do some task here only when groupName differs');
    } else if (prevProps.companyName !== this.props.companyName) {
      console.log('Let'
        's say,I do want to do some different task here only when companyName differs');
    }

  }


  render() {
    /*for simplicity, render code is ignored*/
    return null;
  }
}

export default App;

解决方案

The react hook equivalent to the old componentWillReceive props can be done using the useEffect hook, just specifying the prop that we want to listen for changes in the dependency array.

I.e:

export default (props) => {

    useEffect( () => {
        console.log('counter updated');
    }, [props.counter])

    return <div>Hi {props.counter}</div>
}

For componentDidUpdate just by omitting the dependency array, the useEffect function will be called after every re-render.

I.e:

export default (props) => {

    useEffect( () => {
        console.log('counter updated');
    })

    return <div>Hi {props.counter}</div>
}

这篇关于React Hook 的 componentWillReceiveProps、componentDidUpdate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！