useState 与useReducer源码浅析

react hooks源码 感觉有点复杂。现在只能学习用法和写个简易版的hooks。 在此之前，想先了解下几个出现的名词

状态组件 VS 非状态组件

推荐阅读有状态和无状态组件之间的区别

状态组件

无状态组件

没有自己的state和生命周期函数。接受一个props，只是纯props展示组件，不涉及状态的更新

export const Button=(props)=>{  
    return( 
        <Button className={this.props.className)/>
    )
}

状态组件

有自己的state和生命周期函数。比如下面的内部的状态会受到外部传的props改变而改变

export class Header extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          title: ''
        }
    };
    render() {
        return (
            <Header title={this.state.title}/> 
        )
    }
}

什么情况用状态组件和无状态组件

当不涉及state的更新时，用无状态组件，效率高，复用性高；反之亦然。

受控组件 VS 非受控组件

推荐阅读controlled-vs-uncontrolled-inputs-react

受控组件

非受控组件

表单数据由DOM节点来处理，换句话来说就是使用ref来获取值，如

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this);
    this.input = React.createRef();
  }

  handleInputChange() {
    alert( this.input.current.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={this.input} onChange={this.handleInputChange}/>
        </label>
      </form>
    );
  }
}

受控组件

受控组件接受当前的value值作为prop，并且可以通过回调改变value,如

class Form extends React.Component {
  constructor() {
    super();
    this.state = {
      name: '',
    };
  }

  handleInputChange = (event) => {
    this.setState({ name: event.target.value });
  };

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

受控组件和非受控组件什么时候用

特征	非受控组件	受控组件
一次性获取（如submit）	√	√
提交时验证	√	√
实时验证	x	√
有条件地禁用submit按钮	x	√
强制输入格式	x	√
一个数据的多次输入	x	√
动态的输入	x	√

useState

用法

 const [number, setNumber] = useState(0);
  return (
    <div>
      <div>{number}</div>
      <button onClick={() => setNumber(number)}>点我</button>
    </div>
  );

看起来比较简单。返回一个state和更新state的函数。每次state改变的时候，加入渲染更新队列，即视图发生改变。每一次更新state的函数返回最后更新的值。哪么问题来了，如何加入更新队列？如何返回最后更新的值，其实实现方式很简单

简易版的useState

let index = 0;
let hookState = [];
function useState(initalState){
  let currentIndex = index;
  hookState[currentIndex] = initalState;
  function setState(newState){
    hookState[currentIndex] = newState   // 加入到更新队列
    render()                            //  渲染
  }
// 返回最后最后一次更新的值
return [ hookState[index++],setState]
}

function Counter() {
  const [number, setNumber] = useStates(0);
  return (
    <div>
      <div>{number}</div>
      <button onClick={() => setNumber(number + 1)}>点我</button>
    </div>
  );
}

function render() {
 index = 0； // 每次渲染之后 index = 0
  ReactDOM.render(
    <React.StrictMode>
      <Counter></Counter>
    </React.StrictMode>,
    document.getElementById("root")
  );
}
render();

源码

type BasicStateAction<S> = (S => S) | S;
type Dispatch<A> = A => void;

function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
  return typeof action === 'function' ? action(state) : action;
}


export function useState<S>(
  initialState: (() => S) | S,
): [S, Dispatch<BasicStateAction<S>>] {
  return useReducer(
    basicStateReducer,
    // useReducer has a special case to support lazy useState initializers
    (initialState: any),
  );
}

以上源代码用Typescript标识了入参和返回参。useState是useReducer的语法糖。所以要看useState的源码，不妨先看useRecuder

useRecuder

基本用法

语法

const [state, dispatch] = useReducer(reducer, initialArg, init);

reducer和redux的reducer是一模一样的用法，接收state和action，返回state和当前匹配的dispatch的方式

示例

import React, { useReducer } from "react";
import ReactDOM from "react-dom";

const initialState = { count: 0 };

function counterReducer(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() {
  let [state, dispatch] = useReducer(counterReducer, initialState);
  console.log(state)
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </div>
  );
}
function render() {
  ReactDOM.render(<Counter />, document.getElementById("root"));
}
render();

有很多state的时候可以用useReducer，而非useState，不然useState要写很多。

简易版的useReducer

// 以下是简易版的
let hookState = [];
let hookIndex = 0;

function useReducer(reducer, initialState) {
  hookState[hookIndex] = hookState[hookIndex] || initialState;
  let currentIndex = hookIndex;
  function dispatch(action) {
    console.log(action);
    // 区分useState和useReducer的情况
    hookState[currentIndex] = reducer
      ? reducer(hookState[currentIndex], action)
      : action;
    render();
  }
  return [hookState[hookIndex++], dispatch];
}

function useState(initialState) {
  return useReducer(null, initialState);
}

// function Counter1() {
//   let [number, setNumber] = useState(0);
//   return (
//     <div>
//       <p>{number}</p>
//       <button onClick={() => setNumber(number + 1)}>+</button>
//     </div>
//   );
// }

function Counter() {
  let [state, dispatch] = useReducer(counterReducer, initialState);
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: "decrement" })}>+</button>
    </div>
  );
}

function render() {
  hookIndex = 0;
  ReactDOM.render(<Counter1 />, document.getElementById("root"));
}

render();

源码

源码基于Fiber写的，有点复杂。源码

后续计划

接下来的计划，useCallback与useMemo，这个是踩坑最多，因为一不留心，容易造成循环调用