react related interview questions

React core processes can be divided into two parts:

Reconciliation ( scheduling algorithm may also be referred to render): // reconcile

　　　　Update state and props;

　　　　Call the life cycle of the hook;

　　　　Generating a virtual dom;

　　　　It should be called Fiber Tree more consistent;

　　　　Diff algorithms performed by old and new vdom, get vdom change;

　　　　Are you sure you need to re-render

　　commit:

　　　　If desired, the operation dom node update;

constructor ==== "initialization state
==== componentWillMount " getDerivedStateFromProps //  When the new props in the data changes, synchronize updates to the State
 componentDidMount ====" into line event listener, request data
 componentWillUpdate === " getSnapshotBeforeUpdate 
componentDidUpdate ====" When when id changes, retrieve data 
shouldComponentUpdate ==== " optimize performance rendering, return false to prevent the logic behind 
componentWillReciveProps ====" use less, use getDerivedStateFromProps 
componentWillUnmount ==== "unbundling event

In the new version, React official life cycle has a new change suggestions :

The use of getDerivedStateFromPropsreplacement componentWillMount;
The use of getSnapshotBeforeUpdatereplacement componentWillUpdate;
Avoid using componentWillReceiveProps;

In fact, the cause of the change, it is due to the above-mentioned Fiber. First of all, we know from the above reconciliation and commit React can be divided into two phases, the corresponding life cycle is as follows:

reconciliation:
- componentWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
commit:
- componentDidMount
- componentDidUpdate
- componentWillUnmount

In the Fiber, reconciliation stages of the task division, comes to pause and restart, which could lead to reconciliation in the life cycle of a function to be rendered in the next update cycle multiple calls to the situation, resulting in some unexpected errors.

The new proposal follows the life cycle:

class Component extends React.Component {
  // replace `componentWillReceiveProps`,
  // to be called during initialization and update
  // static function, can not use this
  static getDerivedStateFromProps(nextProps, prevState) {}
  
  // determine whether components need to be updated
  // can be used to optimize the performance of the components
  shouldComponentUpdate(nextProps, nextState) {}
  
  // components after being mounted trigger
  componentDidMount() {}
  
  // replace componentWillUpdate
  // can get the latest data before updating dom
  getSnapshotBeforeUpdate() {}
  
  // components after update call
  componentDidUpdate() {}
  
  // component is about to be destroyed
  componentWillUnmount() {}
  
  // components have been destroyed
  componentDidUnMount() {}
}

　　Recommendations :

In the constructorinitialization state;
In the componentDidMountongoing event listener, and componentWillUnmountthe unbundling events;
In the componentDidMountrequest data, instead componentWillMount;

When the props need to update the state, the use of getDerivedStateFromProps(nextProps, prevState);

Old props need their own stored for comparison;

public static getDerivedStateFromProps(nextProps, prevState) {
	// When the new props in the data changes, synchronize updates to the state
	if (nextProps.data !== prevState.data) {
		return {
			data: nextProps.data
		}
	} else {
		return null1
	}
}

Can componentDidUpdatechange listener props or state, for example:

componentDidUpdate(prevProps) {
	// when the id changes, retrieve data
	if (this.props.id !== prevProps.id) {
		this.fetchData(this.props.id);
	}
}

In componentDidUpdateuse setState, you must add conditions, otherwise it will enter an infinite loop;
getSnapshotBeforeUpdate(prevProps, prevState)Can get the latest rendering data before updating, it was before the call after render, update;
shouldComponentUpdate: By default each call setState, will finally come diff stage, but can be shouldComponentUpdatelife hook returns falseto prevent logic directly behind the implementation, usually used to make conditions rendering, optimized performance rendering.

Two: Virtual DOM understanding

　　(1) Virtual DOM is an abstraction of the DOM, JavaScript object Essentially, this object is more lightweight description of the DOM.

　 (2) the difference between the contents of two, the comparison dom, event attribute method, resistance performance, dom js object into an object, comparison will be faster. Effectively enhance performance.

　　(3) First of all, we all know that in the front-end performance optimization of a secret is as little as possible operating DOM, DOM is not only relatively slow, but also because of frequent changes in the browser DOM cause reflux or back, these are the performance killer, so we need this level of abstraction, the patch process as much as possible at one time difference to update the DOM , DOM thus ensuring that the situation does not appear poor performance.

　 (4) Better cross-platform, such as Node.js is no DOM, if you want to implement SSR (server-side rendering), then a way is to make use Virtual DOM, because Virtual DOM itself is a JavaScript object.

Three: diff algorithms

　　(1) The purpose is to compare the old and new diff Virtual DOM Tree identify differences and updates.

　　(2) a layer of nodes are found, no more than down, directly to give, square reduced to n n

The hierarchical tree structure in accordance with decomposition only compare sibling elements (comparison level)
A list structure for each cell unique key attribute is added to facilitate comparison (key list added)
React only match the same class of component (there's a class refers to the name of the component)
Select temper tree rendering. Developers can override the diff improve performance shouldComponentUpdate

Four: the role of key values

　　(1) if the key values are the same, dom direct reuse, do not create dom, direct ratio of the two, do not recycle ratio

　　(2) with a new pointer to the corresponding node key to the old array to find the corresponding node, where three cases,

　　　　　　When there is no corresponding key, create a new node,

　　　　　　If there is a key and the same node, the new node to patch the old node,

　　　　　　If there are key but not the same node, create a new node

Five: HOC understand how higher-order components

　　 Receive some function that returns the function, components for packaging, returns a new component to be used in many places, there is little difference between the common things written in the high-order components, by passing additional parameters dynamically change the components under different scenarios of use difference.

Six: Middleware principle redux

　　action - between store-reducer-props action and store, a bridge dispatch, modification dispatch,

　　store.dispatch, directly to the action (the object) is passed to Store, middleware, action may be a function, the function can be converted to an object, it is passed to the store.

Seven: setState what happened? Encountered any pit

　　Reconciliation process. setState general how to use , what went in, objects or methods passed.

this.setState({
    name: 'Li'
});
this.setState(() =>({
    name: 'Li'
}));
Never use a function call, it will avoid some of the pit.
this.setState({
    age: this.state.age+1
});
setState asynchronous, crazy click the button, age is not a time plus 1, will be a plus five or six, state asynchronous, will increment
<input  refs="input"  value={this.state.age} />  ====1 
this.setState((prevState) =>{
    age: ++ prevState
});
this.refs.input.value  ==== 1
this.setState((prevState) =>{
    age: ++ prevState
}, () => {
    this.refs.input.value // asynchronous execution after the completion of the implementation of state
});

Eight: ref is a function, what are the benefits?

　　Easy to react to re-render the destruction components, effectively empty the things cited in the ref, to prevent memory leaks