Shulou(Shulou.com)06/01 Report--

This article focuses on "what are the new features of react version 16.8 and their impact on react development". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn about the new features of react version 16.8 and their impact on react development.

When the Facebook team was not satisfied with the MVC framework in the community, they developed an open source front-end framework, react, which was released in 2013.

React initially advocated functional programming, creating components using function and the internal method React.creactClass, and then, after the introduction of ES6, using class component Class to build components that contain lifecycles.

Update of react version 16.8

The landmark information of the react16.8 version update is the introduction of hooks and related api.

UseState:// functional components initialize state and change state:const Counter = () = > {const [num,setNum] = userState (0); return ({count} setCount (num+ 1)} > +);}; useEffect

The component of userEffect side effect function not only replaces the life cycle function of component initialization, component mount success and component state update.

At the same time, it can also deal with some memory queues at this stage, including timers, etc., which solves the problem that before version 16.8, after the components are removed, the asynchronous queue is not removed, and the occupation of memory leads to page stutters.

UseEffect (() = > {compoment.subscribe (id); return () = > {compoment.unsubscribe (theId) / / unsubscribe}}); what problem does react16.8 version update solve? component reuse is more convenient.

Before the newer version, reuse components, more often using high-level components, and encapsulated components, were reused by passing parameters and communicating with parent and child components.

After the update, you can accept the exposed content of the component by returning the state of the functional component.

Example

/ / previous versions of function children () {return function (WrappedComponent) {return class HighComponent extends React.Component {state = {childProps: xxx}; render () {const {childProps} = this.state; return;} class App extends Component {render () {/ * invoke higher-level components * / const {childProps} = this.props Return ()} / / New version function children () {const [childProps, setChildProps] = useState (xxx); return childProps;} function App {const {childProps} = useTable (); return ()}

As we mentioned above, clear the timer and solve the problem of eliminating memory-consuming queues during life cycle changes, etc.

State management has appeared in functional components. In the previous process of react functional programming, react can only passively receive a props state passed down from the parent component. After the hooks update, we can use the method of hooks update to improve the functionality and expansibility of the component. Functional components have the same controllable life cycle as class components.

UseEffect replaces part of the life cycle functions, simplifies the code from the point of view of code volume, solves the need to constantly use bind or arrow functions to bind the current this in the writing process of class components, and focuses more on the management of the current state.

Hooks and react diff algorithm

React diff will not explain it in depth here. To put it simply, the diff algorithm is in react and vue2.0 versions:

There is an internal algorithm for virtual dom, which renders a key value for each dom during component rendering.

During the state status update process, the corresponding virtual dom will compare the real rendered dom elements on the page. If a node changes during comparison, the data status of the current virtual dom node will be changed accordingly, and then the real dom will be rendered into the page.

The connection between the two:

After the update, hooks reduces the execution of life cycle functions, and updates the status more quickly, so that the execution speed of diff is improved in the process of virtual dom execution.

Hooks enables functional components to have their own internal state. During the execution of functional components, they can update their status without waiting to be loaded into the parent component, thus reducing the depth of part of the dom. In the process of page rendering, it can also improve the speed of page rendering in disguise.

At this point, I believe you have a deeper understanding of "what are the new features of react version 16.8 and their impact on react development". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.