React

1. Controlled components and uncontrolled components

For form elements. The difference is whether the value of the form is controlled by the component state.

Controlled Component: The value of the form is controlled by the internal state of the component. {setState(e.target.value)}} If the value of the input field is changed, the new value is mapped back to the internal state to achieve bidirectional binding.

Uncontrolled Components: The value of a form is not controlled by state. You cannot pass a value to input, but you can pass a defaultValue to the form using defaultValue. It fetches form data from a DOM node by using a REF.

const Note: React.FC=()=>{
    const [note,setNote]=useState('')
    const refInput=useRef(null)
    const x=()=>{
        setNote(refInput.current.value)
    }
    return (
        <input type='text' defaultValue={note} ref={refInput}
        onBlur={x}>
    )
}
Copy the code

Give input a default value. Create a ref and use the ref to retrieve the form’s data from the DOM node. To do this: Bind the ref attribute of the input to the value of the refInput variable, so refInput. Current represents the input element. OnBlur listens for mouse out events, refinput.current. Value retrieves form data, and stores this data in note.

2. What life cycle functions does React have? What’s the use of separation?

Constructor: called when creating a component to initialize state, data, etc

Render: Create a virtual DOM

ComponentDidMount: Called after the component is mounted (appears after the page). AJAX data requests are placed here

ComponentDidUpdate: Called after the page is updated. Data requests can also be placed here

ComponentWillUnmount: Called when a component is about to be removed from the page and then destroyed, clear timer, unsubscribe, etc

3. React How to communicate between components?

Between parent and child components: The parent component passes data to the child component via props. You also use props to pass a function to the child component, which passes data to the parent component.

Grandson component: pass props twice

Any component: redux. Redux addresses communication between components by managing state shared by multiple components

4. ShouldComponentUpdate?

It allows us to manually determine whether or not to update the component. The default value is true, indicating that the UI will be updated whenever the component’s state or props changes. If false is returned, the UI is not updated. Avoid unnecessary updates.

This hook has to be checked manually. React has this built-in function, React.PureComponent. The PureComponent compares each key of the new state to the old state and each key of the new props to the old props before render. If all keys have the same value, no render is performed; Render if any key value is different. Improve rendering performance

What is the virtual DOM?

The virtual DOM is an object used to represent the DOM.

The result of executing the render function is not a real DOM node, but a lightweight JS object, which the render function returns as a virtual DOM.

The old and new virtual DOM are compared using the diff algorithm, updating only the parts that have changed. The actual DOM is updated to a minimum.

The overhead of calling the DOM is significant. The execution of the virtual DOM is entirely in the Javascript engine without this overhead.

What is a redux

Redux is the React state management tool that provides predictable state management.

Key Concepts:

Store: Store state, a Redux application can only have one store. Its common API: store.getState() is used to get the state store.dispatch(action) update state

Action: Action is just a plain JS object that describes what happens. The only way to update the data in state is to initiate an action. So action is the payload that pushes data from the app to the Store.

Reducer: First it is a pure function that accepts state and action as arguments and returns a new state. He is associating state with action. Action only tells us what is going to happen. How to update data is accomplished in the Reducer function. How do reducer state changes respond to actions and send them to the store

At the heart of Redux is one-way data flow, which means that all data follows the same lifecycle in four main steps: First, call Store. dispatch to initiate an action, and then call reducer function to return a new state. The root Reducer merges several sub-reducer into a state tree through combineReducers method. Finally, the store stores the new state tree.

7. How does Connect work?

An API provided by the React-Redux library. It enables your React component to read data from the Redux Store and distribute actions to the store to update the data.

Refer to the article