[React] Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3
The componentWillReceiveProps() method is being deprecated in future version of React (17). Many of us use this method day-to-day to check for incoming prop changes, store state, and to invoke side effects like logging or fetching data from a server.
In this lesson, we'll look at how to refactor an existing component that uses componentWillReceiveProps() to instead use getDerivedStateFromProps() and componentDidUpdate().
Additional Resources: https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#migrating-from-legacy-lifecycles
In short,
componentWillReceiveProps:
The new static
getDerivedStateFromProps
lifecycle is invoked after a component is instantiated as well as when it receives new props. It can return an object to updatestate
, ornull
to indicate that the newprops
do not require anystate
updates.
should handle any local data changes:
static getDerivedStateFromProps(nextProps, prevState) { const { number } = nextProps; return number === prevState.number ? { computedMessage: "Same number, try again!", number } : { computedMessage: null, number }; }
componentDidUpdate:
hanlde any async update
componentDidUpdate(nextProps) { const { number } = nextProps; if (this.state.computedMessage === null) { fakeServerRequest(this.props.number).then(result => { this.setState({ computedMessage: result }); }); } }
componentWillReceiveProps together with
componentDidUpdate
, this new lifecycle should cover all use cases for the legacycomponentWillReceiveProps
.
相关文章
- [XState + React] using @xstate/inspect to display state machine char in webapp
- [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
- [React] Create a Persistent Reference to a Value Using React useRef Hook
- [React] Refactor a Class Component with React hooks to a Function
- [PWA] Add Push Notifications to a PWA with React in Chrome and on Android
- [React] Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3
- [React] Refactor a Stateful List Component to a Functional Component with React PowerPlug
- [Poi] Customize Babel to Build a React App with Poi
- [Recompose] Pass a React Prop to a Stream in RxJS
- [React] Call setState with null to Avoid Triggering an Update in React 16
- [React] Configure a React & Redux Application For Production Deployment and Deploy to Now
- [React Testing] Intro to Shallow Rendering
- [React] Intro to inline styles in React components
- [XState + React] using @xstate/inspect to display state machine char in webapp
- [Typescript + React] Tip: Use generics in React to make dynamic and flexible components
- [React] useCallback + useMemo to avoid re-render
- [React Recoil] Write a Custom Recoil Hook to Reset a Value in the Recoil State
- [React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom
- [React] Understanding setState in componentDidMount to Measure Elements Without Transient UI State
- [Recompose] Create Stream Behaviors to Push Props in React Components with mapPropsStream
- [React Fundamentals] Introduction to Properties
- 一统江湖的大前端(7)React.js-从开发者到工程师
- 软件测试技术之利用 Jest 为 React 组件编写单元测试