React Hooks Complete tutorial

Class MyConponent extends React.Component {// React generates data state = {counts: ClickHandle = () => {this.setState({counts: this.state.counts++});if (this.props.onClick) this.props.onClick();
  }

  // lifecycle API
  componentWillUnmount() {
    console.log('Will mouned! ');
  }

    // lifecycle API
  componentDidMount() {
    console.log('Did mouned! '); } // Accept external data (or processing) and render the data visually (props) {return( <> <div>Input content: {props.content}, btn click counts: {this.state.counts}</div> <button onClick={this.clickHandle}>Add</button> </> ); }}Copy the code

class People extends Component {
  state = {
    name: 'dm', age: 18,} handleClick(e) {// error! console.log(this.state); }render() {
    const { name, age } = this.state;
    return(<div onClick={this.handleClick}>My name is {name}, i am {age} years old.</div>); }}Copy the code

// Class Component
class App extends Component {
  state = {
    count: 0
  }

  componentDidMount() {
    console.log('Did mount! ');
  }

  increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  decreaseCount = () => {
    this.setState({ count: this.state.count - 1 });
  }

  render() {
    return (
      <>
        <h1>Counter</h1>
        <div>Current count: {this.state.count}</div>
        <p>
          <button onClick={this.increaseCount}>Increase</button>
          <button onClick={this.decreaseCount}>Decrease</button>
        </p>
      </>
    );
  }
}

// Function Component
function App() {
  const [ count, setCount ] = useState(0);
  const increaseCount = () => setCount(count + 1);
  const decreaseCount = () => setCount(count - 1);

  useEffect(() => {
    console.log('Did mount! '); } []);return (
    <>
      <h1>Counter</h1>
      <div>Current count: {count}</div>
      <p>
        <button onClick={increaseCount}>Increase</button>
        <button onClick={decreaseCount}>Decrease</button>
      </p>
    </>
  );
}
Copy the code

var App_App = function (_Component) {
  Object(inherits["a"])(App, _Component);

  function App() {
    var _getPrototypeOf2;
    var _this;
    Object(classCallCheck["a"])(this, App);
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = Object(possibleConstructorReturn["a"])(this, (_getPrototypeOf2 = Object(getPrototypeOf["a"])(App)).call.apply(_getPrototypeOf2, [this].concat(args)));
    _this.state = {
      count: 0
    };
    _this.increaseCount = function () {
      _this.setState({
        count: _this.state.count + 1
      });
    };
    _this.decreaseCount = function () {
      _this.setState({
        count: _this.state.count - 1
      });
    };
    return _this;
  }
  Object(createClass["a"])(App, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      console.log('Did mount! ');
    }
  }, {
    key: "render",
    value: function render() {
      returnreact_default.a.createElement(/*... * /); }}]);return App;
}(react["Component"]);
Copy the code

function App() {
  var _useState = Object(react["useState"])(0),
    _useState2 = Object(slicedToArray["a" /* default */ ])(_useState, 2),
    count = _useState2[0],
    setCount = _useState2[1];
  var increaseCount = function increaseCount() {
    return setCount(count + 1);
  };
  var decreaseCount = function decreaseCount() {
    return setCount(count - 1);
  };
  Object(react["useEffect"]) (function () {
    console.log('Did mount! '); } []);return react_default.a.createElement();
}
Copy the code

functionChild(props) { const handleClick = () => { this.props.setCounts(this.props.counts); }; // UI changes can only be made with Parent Component update props! !return (
    <>
      <div>{this.props.counts}</div>
      <button onClick={handleClick}>increase counts</button>
    </>
  );
}

class Parent extends Component() {// State management depends on Class Component counts = 0render () {
    const counts = this.state.counts;
    return( <> <div>sth... </div> <Child counts={counts}setCounts={(x) => this.setState({counts: counts++})} /> </> ); }}Copy the code

function useWinSize() {
  const html = document.documentElement;
  const [ size, setSize ] = useState({ width: html.clientWidth, height: html.clientHeight });

  useEffect(() => {
    const onSize = e => {
      setSize({ width: html.clientWidth, height: html.clientHeight });
    };

    window.addEventListener('resize', onSize);

    return () => {
      window.removeEventListener('resize', onSize);
    };
  }, [ html ]);

  returnsize; } // Depending on the width of win, fit the image layoutfunction Article(props) {
  const { width } = useWinSize();
  const cls = `layout-${width >= 540 ? 'muti' : 'single'}`;

  return( <> <article>{props.content}<article> <div className={cls}>recommended thumb list</div> </> ); } // The elastic layer width is adapted to win width and heightfunction Popup(props) {
  const { width, height } = useWinSize();
  const style = {
    width: width - 200,
    height: height - 300,
  };
  return (<div style={style}>{props.content}</div>);
}
Copy the code

function App() {
  const { waiting, errText, name, onChange } = useName();
  const handleSubmit = e => {
    console.log(`current name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <>
        Name: <input onChange={onChange} />
        <span>{waiting ? "waiting..." : errText || ""}</span>
      </>
      <p>
        <button>submit</button>
      </p>
    </form>
  );
}
Copy the code

useState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>]
Copy the code

function throwInvalidHookError() {
  invariant(false.'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.');
}

var ContextOnlyDispatcher = {
    ...
  useEffect: throwInvalidHookError,
  useState: throwInvalidHookError,
  ...
};
Copy the code

function renderWithHooks(current, workInProgress, Component, props, refOrContext, nextRenderExpirationTime) {
  currentlyRenderingFiberThe $1= workInProgress; // The pointer points to the currently render fiber node....if(nextCurrentHook ! == null) {// Data update ReactCurrentDispatcherThe $1.current = HooksDispatcherOnUpdateInDEV;
  } else{// first render ReactCurrentDispatcherThe $1.current = HooksDispatcherOnMountInDEV; }} / / / hook API implementation HooksDispatcherOnMountInDEV = {... useState:function (initialState) {
    currentHookNameInDev = 'useState'; .returnmountState(initialState); }};Copy the code

// Hook type definitiontypeHook = {memoizedState: any, / / store the latest state baseState: any baseUpdate: Update < any, any > | null, queue: UpdateQueue < any, any > | null, / / update the queue next: Hook | null, / / the next Hook} / / define an updatetypeUpdate<S, A> = { ... Action: A, eagerReducer: ((S, A) = > S) | null, eagerState: S | null, / / next to Update the status value: the Update < A > S, | null,... }; // The queue definition needs to be updatedtypeUpdateQueue < S, A > = {last: Update the < A > S, | null, / / last Update operation dispatch: (A = > mixed) | null, lastRenderedReducer: ((S, A) = > S) | null, / / the latest process state of reducer lastRenderedState: S | null, / / after the latest rendering state};Copy the code

function App() {
  const [ n1, setN1 ] = useState(1);
  const [ n2, setN2 ] = useState(2);

  // if (sth) {
  //    const [ n4, setN4 ] = useState(4);
  // } else {
  //    const [ n5, setN5 ] = useState(5);
  // }

  const [ n3, setN3 ] = useState(3);
}
Copy the code

// useState() executes mountState for first renderfunction(initialState) {// Create a new hook object from the current Fiber, attach the hook to the end of the Fiber hook chain, and return the hook var hook = mountWorkInProgressHook();  hook.memoizedState = hook.baseState = initialState; var queue = hook.queue = { last: null, dispatch: null, lastRenderedReducer: (state, action) => isFn(state) ? action(state) : action, lastRenderedState: initialState }; // currentlyRenderingFiberThe $1Save the Fiber node currently being rendered // connect the returned Dispatch to the node that called the hook, Dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiberThe $1, queue);
  return[hook.memoizedState, dispatch]; } //// functions as followssetThe State!functiondispatchAction(fiber, queue, action) { ... Var update = {action, // next: null,}; var last = queue.last;if (last === null) {
    update.next = update;
  } else{ last.next = update; Queue. Last = update; . ScheduleWork (Fiber, expirationTime); }Copy the code

function updateState(initialState) {
  var hook = updateWorkInProgressHook();
  var queue = hook.queue;
  var newState;
  var update;

  if(numberOfReRenders > 0) {// Component own re-render newState = hook. MemoizedState; // renderPhaseUpdates is a global variable that is a HashMap structure: HashMap<(Queue: Update)> Update = renderphaseupdates.get (Queue); }else {
    // update
    newState = hook.baseState;
    update = hook.baseUpdate || queue.last;
  }

  do{ newState = update.action; Update = update.next; }while(update ! == null) hook.memoizedState = newState;return [hook.memoizedState, queue.dispatch];
}
Copy the code

function App() {
  const [n1, setN1] = useState(1);
  const [n2, setN2] = useState(2);
  const [n3, setN3] = useState(3);

  useEffect(() => {
    setN1(10);
    setN1(100); } []);return (<button onClick={() => setN2(20)}>click</button>);
}
Copy the code

useEffect(effect: React.EffectCallback, deps? : ReadonlyArray<any> | undefined)Copy the code

HooksDispatcherOnMountInDEV = {
    useEffect: function() {
    currentHookNameInDev = 'useEffect'; .returnmountEffectImpl(Update | Passive, UnmountPassive | MountPassive, create, deps); }};function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
  var hook = mountWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  return hook.memoizedState = pushEffect(hookEffectTag, create, undefined, nextDeps);
}

functionPushEffect (tag, create, destroy, deps) {var effect = {tag: tag, create: create, useEffect: Destroy, // Store the return function of the callback passed in by useEffect for effect cleanup deps: deps, next: null}; . componentUpdateQueue = createFunctionComponentUpdateQueue(); componentUpdateQueue.lastEffect = effect.next = effect; .return effect;
}

function renderWithHooks() {... currentlyRenderingFiberThe $1.updateQueue = componentUpdateQueue; . }Copy the code

/ / write with a Hookfunction App() {
  const [data, setData] = useState(' ');

  useEffect(() => {
    setTimeout(() => {
      setData(`current data: ${Date.now()}`);
    }, 3000);
  });

  return<div>{data}</div>; } class App extends Component {state = {data =' '}

  componentDidMount() {
    setTimeout(() => {
      this.setState({ data: `current data: ${Date.now()}`}); }, 3000); }render() {
    return<div>{this.state.data}</div>; }}Copy the code

function App() {
  useEffect(() => {
    const timer = setTimeout(() => {
        console.log('print log after 1s! ');
    }, 1000);
    window.addEventListener('load', loadHandle);

    return () => window.removeEventListener('load', loadHandle); }, []); } class App extends Component {componentDidMount() {
    const timer = setTimeout(() => {
        console.log('print log after 1s! ');
    }, 1000);
    window.addEventListener('load', loadHandle);
  }

  componentDidUnmount() {
    window.removeEventListener('load', loadHandle); }}Copy the code

useContext<T>(Context: ReactContext<T>, unstable_observedBits: void | number | boolean): T
Copy the code

functionUseContext (content, observedBits) {// Handle observedBits temporarily // isPrimaryRenderer will only be used in React Nativefalse
  return isPrimaryRenderer ? context._currentValue : context._currentValue2;
}
Copy the code

useReducer<S, I, A>(reducer: (S, A) => S, initialArg: I, init? : I => S, ): [S, Dispatch<A>]Copy the code

const useReducer = (reducer, initialArg, init) => {
  const [state, setState] = useState(
    init ? () => init(initialArg) : initialArg,
  );
  const dispatch = useCallback(
    action => setState(prev => reducer(prev, action)),
    [reducer],
  );
  return useMemo(() => [state, dispatch], [state, dispatch]);
};
Copy the code

functionReducer (state, action) {reducer(state, action) { switch (action.type) {case "increment":
      return{... state, count: state.count + state.step, }; . }}function App() {
  const [state, dispatch] = useReducer(reducer, {count: initialCount, step: 10});

  return (
    <>
      <div>{state.count}</div>
      // redux like diaptch
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <ChildComponent dispatch={dispatch} />
    </>
  );
}
Copy the code

useCallback<T>(callback: T, deps: Array<mixed> | void | null): T
Copy the code

// When a Parent re-render class extends Component {// When a Parent re-render class extends Component {render() { const someFn = () => {}; // when re-render, the someFn function is re-instantiatedreturn (
      <>
        <Child someFn={someFn} />
        <Other />
      </>
    );
  }
}

class Child extends Component {
  componentShouldUpdate(prevProps, nextProps) {
    returnprevProps.someFn ! == nextProps.someFn; // Function comparisons will always returnfalse}}Copy the code

function App() {
  const [count, setCount] = useState(0);
  const [list, setList] = useState([]);
  const fetchData = async () => {
    setTimeout(() => {
      setList(initList);
    }, 3000);
  };

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <>
      <div>click {count} times</div>
      <button onClick={() => setCount(count + 1)}>Add count</button>
      <List list={list} />
    </>
  );
}
Copy the code

useMemo<T>(create: () => T, deps: Array<mixed> | void | null): T
Copy the code

functionApp(props) { const start = props.start; const list = props.list; const fibValue = useMemo(() => fibonacci(start), [start]); Const MemoList = useMemo(() => <List List ={List} />, [List]);return (
    <>
      <div>Do some expensive calculation: {fibValue}</div>
      {MemoList}
      <Other />
    </>
  );
}
Copy the code

// Re-render const MemoList = react.memo (({list}) => {return (
    <ul>
      {list.map(item => (
        <li key={item.id}>{item.content}</li>
      ))}
    </ul>
  );
});
Copy the code

/ / the mount stagefunction mountRef(initialValue) {
  var hook = mountWorkInProgressHook();
  var ref = { current: initialValue };
  {
    Object.seal(ref);
  }
  hook.memoizedState = ref;
  returnref; } // Update phasefunction updateRef(initialValue) {
  var hook = updateWorkInProgressHook();
  return hook.memoizedState;
}
Copy the code

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`; }); // Click button three times in succession, the page title will be changed to 1, 2, 3, instead of 3, 3, 3return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
Copy the code

functionmountRef(initialValue) { var hook = mountWorkInProgressHook(); var ref = { current: initialValue }; // ref is a plain object reference, with no closure {object.seal (ref); } hook.memoizedState = ref;return ref;
}
Copy the code

// End of mount, updated to DOM const onMount =function useDidMount(effect) => {
    useEffect(effect, []);
};
Copy the code

// Render DOM before rendering const onUpdate =function useUpdate(effect) => {
  useLayoutEffect(effect, []);
};
Copy the code

const unMount = function useWillUnMount(effect, deps = []) => {
  useEffect(() => effect, deps);
};
Copy the code

Const MyComponent = react.memo (() => {return <Child prop={prop} />
}, [prop]);

// or
function A({ a, b }) {
  const B = useMemo(() => <B1 a={a} />, [a]);
  const C = useMemo(() => <C1 b={b} />, [b]);
  return (
    <>
      {B}
      {C}
    </>
  );
}
Copy the code

function App() {
  const { waiting, errText, name, onChange } = useName();
  // ...

  return( <form> <div>{name}</div> <input onChange={onChange} /> {waiting && <div>waiting<div>} {errText && <div>{errText}<div>}  </form> ); }Copy the code

Finally, thank you for reading such a long article

The Ant RichLab Front End Team is committed to sharing quality technical articles with you

Our team is recruiting urgently: interactive graphics technology, front-end/full stack development, front-end architecture, algorithm, big data development and other directions, the expectation level P6+ ~ P7, the team technical atmosphere is good, big room for advancement, resume can be directly hit me [email protected]