When to use the state manager?

• 1. The page-level components do not need to communicate and share the status.
• 2. No global variable sharing.
• 3. For small applications, context can be used to meet simple requirements

What happens if the return in the render function does not use ()?

This is the correct way to do a common pit completion for return autosemicolon:

Function App() {return (<div className="App"> hello <Home /> <My /> </div>); } function App() {return <div className="App"> <Home /> <My /> </div>}Copy the code

Wrong way:

function sum(x, y) { return x+y; Function sum(x, y) {return; // the semicolon x+y is automatically added; }Copy the code

Can componentWillUpdate directly modify the value of state?

Can’t. And componentWillMount componentWillReceiveProps similarly all can’t, cause death cycle. The following code:

import React from 'react';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: 1 };
    }

    handleChage = () => {
        this.setState({
            name: 2
        });
    };

    render() {
        return (
            <div>
                <input value="input" onChange={this.handleChage} />
                <h1>{this.state.name}</h1>
            </div>
        );
    }

    componentWillUpdate() {
        this.setState({
            name: 3
        });
        console.log('component will update');
    }
}

export default App;

Copy the code

The result is as follows:

Tell me what you understand about React rendering

• 1. The rendering process in React15 is divided into two stages, a Reconciler stage and a Renderer stage, which are executed synchronously and cross-over without interruption.

Reconciler: The virtual DOM is created recursively, in an uninterrupted recursive process, and is then compared to the previous virtual DOM, the Diff DOM, to find out the corresponding changes, and the renderer stage is called to perform rendering. Renderer: Render the parts that need to be changed onto the real DOM.Copy the code

• 2, react16, because react15 synchronization is not interrupted, there are certain problems in CPU processing and IO processing, CPU processing JS logic is too long, page stuck frame drop, IO bottleneck, network delay, page request time is too long, the user is aware of the page request. This problem also requires synchronous updates to become asynchronous interruptible updates. Since the recursion of React15 does not allow asynchronous interruptible updates, React16 is rewritten in Fiber.

Scheduler: Dispatches tasks to Reconciler according to priority to execute Reconciler: Fiber architecture is used for asynchronous updates and interruptible behavior. Renderer: The Renderer stage is not entered until all the Reconciler's internal affairs are executed in memory for the component.Copy the code

What rendering hijack?

Changing the render output of a component is called render hijacking. This is easier to understand when combined with react’s higher-order components. Render hijacking can be achieved by inheriting an original component, modifying render logic, or modifying state and Pros.