preface

Just celebrate the birth of the mother of the motherland, see the false balance will be insufficient, friends to play is happy, anyway, I am dead at home, did not go out to play, did not study at home, it is ashamed. React is a one-way data stream. Data drives UI updates. There are several ways to drive view updates in React.

1. setState

SetState is probably the most common way to update a view, you just give it an initial state, ComponentWillUpdate => componentWillUpdate => Render => componentDidUpdate If you don’t manually return false in shouldComponentUpdate, the UI will be updated at this point.

Note that even though this.setState({}) is null, react will update and call the above four lifetimes, but the UI view will not change.

Of course, this is all based on the Class Component, because setState is a method on the Component prototype and must be a Component that inherits Component to call this.setState. (There was a previous article on setState that interested movers and shakers can check out.)

2. forceUpdate

Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.

If you call forceUpdate, the component should skip the shouldComponentUpdate hook. If you manually return false, this hook should be updated as well. Child component updates are still controlled by shouldComponentUpdate.

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().

ForceUpdate () is used when views update data from sources other than props, such as properties bound to component instances, or simply modify this.state.xxx = XXX and call this.forceUpdate(). This is not recommended and should normally be avoided using forceUpdate instead of updating views via state or props.

3. Native manipulation of DOM

React will inevitably have the ability to manipulate the native DOM. For example, if you use a third-party library such as jquery to retrieve the DOM, or if you need to implement a drag-and-drop, two-finger zooming component, You might be able to use dom manipulation to bypass the React setState and then perform a series of dom diff calculations and update the DOM directly to improve performance.

I have a Demo here for the above three ways to update the UI. It should be noted that when the color changes to red through setState update, and the color changes to green after clicking the native DOM button, when clicking setState button, it is found that the view is not updated, but the render function is still used. That’s because before click the native dom button, enclosing the state. The backgroundColor value is red, the native operation is directly change the dom style, in the point back to setState button, Actually this. State. The value of the backgroundColor or red, although the update logic, but because of the react of old and new virtual dom contrast, found the color did not change, lead to no patch on the UI.

4. dispatch action

React state update UI. When redux is used in a project, we usually dispach an action, change store, and update UI. This.props. Dispatch ({type: ‘XXX’}) is used to drive UI view updates.

When we dispatch an action, the call is actually Store. dispatch, which is ok. Store. dispatch will run all the reducer registered in createStore. Find the corresponding type update data and return a new state.

And our component that wants to get the store data has to connect(mapStateToProps, mapDispatchToProps)(App) like this, The Connect component in React – Redux calls a trySubscribe method at componengDidMount, which internally calls Store. subscribe to subscribe to a handleChange method.

So when you dispatch an action, it triggers a method in the Connect component, and the Connect component also maintains a state called storeState, and every time you get a new sotre you call setState, Trigger the render function, which will combine the functions of mapStateToProps, mapDispatchToProps, and the optional mergeProps as passed in your connect. Finally in the Connect components inside the return out a createElement method (WrappedComponent, enclosing mergedProps) something like that, while the createElement method the second parameter is the props you components, So every time the props changes, it drives an update to the view. This is how Redux works. Of course, it’s a short description. Next time, I’ll write a separate article about React, Redux, and React-Redux.

conclusion

  1. Change the state-driven view by calling this.setState.
  2. Force a view update by calling this.forceUpdate.
  3. Update views by manipulating native DOM.
  4. By changing the props driver view (redux or modifying the parent component pass props).