UI components abstract state handler. Common side effects are divided into state and state.
I. Overview
useState: processing function only changes the reference state itself;
side effects Status: variable and will reference a state other than the state to be modified;
useReducer: calculated decoupled state of a maintenance mechanism;
Two, useState
useState: flux of state management module (this module holds)
const [User, setUser] = React.useState ({});
const [loading, setLoading] = React.useState (to false);
const {User, loading} = useFetchUser (props.visible);
Three, useEffect
useEffect: variable and will reference the state other than the state of modification
function useFetchUser (visible) {
React.useEffect (() => {}, [visible]);
}
function RandomUserModal(props) {
React.useEffect(() => {setLoading(true);}, [props.visible]);
}
In the function of the unit body (in this case rendered React stage) to change DOM, add a subscription, set the timer, logging and perform other operations include the side effects are not allowed, as this may cause damage inexplicable bug and UI consistency.
Use useEffect complete the operation side effects. Assigned to the function useEffect will be executed after the component rendering to the screen. You can escape the effect seen as a gateway to the world from the imperative React purely functional world.
By default, effect will be executed after the end of each round of the rendering, but you can choose to have it just in time to perform only certain values change.
Tell a handler and a binding state observed when the status changes, perform processing functions;
Although useEffect delays in the implementation of the browser rendering, but will ensure that before the implementation of any new rendering. React will be refreshed on a rendering effect before the component updates.
Four, useContext:
Global reference user state;
sharedConfigs;
Four, useLayoutEffect
Adjustment of the layout before rendering dom back out;
layoutsubviews;
Fifth, the state of the box
A talk state as a component box:
1, management of a state of their own;
2, adverse effects on the state of the external input is responsive;
https://segmentfault.com/a/1190000017182184
Six, useReducer
useState alternative. It takes a form such as (state, action) => newState the reducer, and return to the current state and its supporting dispatch method. (If you are familiar with Redux, then you already know how it worked.)
In some scenarios, useReducer would be more suitable than useState, such as state logic is more complex and includes a plurality of sub-values, or the next state dependent on the state before, etc. . And, using useReducer but also to those components will trigger deep updates do performance optimization, because you can pass dispatch to the sub-components rather than the callback function.
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'increment'})}>+</button>
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
</>
);
}