useState 原理

2019-11-07 本文已影响0人 sweetBoy_9126

useState用法

点击button会发生什么？

分析：

setN
setN一定会修改数据x, 将n+1存入x
setN一定会触发<App/>重新渲染(render)
useState
useState肯定会从x读取n的最新值
x
每个组件有自己的数据x, 我们将其命名为state

最简单的useState的实现

https://codesandbox.io/s/admiring-bash-utvzo

问题：由于我们所有的数据都放在_state，如果一个组件用了两个useState就会冲突
比如：

const [n, setN] = myUseState(0);
const [m, setM] = myUseState(0);

这样我们修改一个另一个也会跟着变

改进思路：

把_state做成一个对象
比如_state = {n:0, m: 0}
不行，因为useState(0)并不知道变量叫n还是m
把_state做成数组
比如_state = [0,0]
这样我们每次通过对应的索引来修改就可以

let _state = [];
let index = 0;
const myUseState = num => {
  // 之所以要把index赋给一个currentIndex变量是因为，
  // 我们render完后紧接着要对index+1，这样就可以调用几次useState数组里面就有多少个state，
  // 也就是index就会和state对应
  const currentIndex = index;
  _state[currentIndex] =
    _state[currentIndex] === undefined ? num : _state[currentIndex];
  const setN = num1 => {
    _state[currentIndex] = num1;
    render();
  };
  index += 1;
  return [_state[currentIndex], setN];
};
function render() {
  // 之所以render前先置为0是因为如果不置0就会一直累加下去，而页面根本没有那么多state
  index = 0;
  ReactDOM.render(<App />, rootElement);
}
function App() {
  const [n, setN] = myUseState(0);
  const [m, setM] = myUseState(0);
  const x = () => {
    setN(n + 1);
  };
  const y = () => {
    setM(m + 1);
  };
  return (
    <div>
      {n}
      <button onClick={x}>+1</button>
      <br />
      {m}
      <button onClick={y}>+1</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在线运行地址：https://codesandbox.io/s/autumn-hooks-resfq

_state数组方案的缺点

useState调用顺序
若第一次渲染时n是第一个，m是第二个，k是第三个，则第二次渲染时必须保持顺序完全一致，所以我们不能写成下面这样

const [n, setN] = myUseState(0);
  let m, setM
  if (n % 2 === 1) {
    [m, setM] = myUseState(0);
  }

上面代码一开始默认页面中只有一个myUseState，然后我们对n操作这时候又变成了两个，它两次渲染不一致就会出现问题，所以我们如果在react中这样写就会直接报错

现在的代码还有一个问题：
App用了_state和index, 那其他组件用什么？
解决办法：给每个组件创建一个_state和index
放在全局作用域里重名了咋办？
解决办法：放在组件对应的虚拟节点对象上

总结

每个函数组件对应一个React节点

每个节点保存着state和index

useState会读取state[index]

index由useState出现的顺序决定

setState会修改state，并触发更新

使用useRef和useContext得到一个贯穿始终的状态

useState每次修改都会生成一个新的state

function App() {
  const [n, setN] = React.useState(0)
  const log = () => {
    setTimeout(() => console.log(`n: ${n}`), 3000)
  }
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  )
}

上面的代码有两种操作
1). 点击+1再点击log--> 得到的n的值就是当前的值+1
2). 点击log再点击+1--> 得到的值就是上一个n的值

原因：因为有多个n

上图中有两条线
第一条就是我们正常操作先点+1再点log，它会先触发setN，setN执行就出触发render，这时候就会第二次渲染App，生成一个新的n，n是1，再点击三秒后就会log（1）；
第二条就是我们先点log，它会三秒后打印出第一次这个n，这时候的n的值还是0，然后点击+1触发render，第二次渲染App，生成一个新的n=1，然后三秒钟到打印出第一次的n也就是0
总结：我们每次修改state都不会修改当前的state，而是会重新生成一个新的state，旧的state和新的state有可能同时存在，之后旧的state会被垃圾回收掉

在线代码运行：https://codesandbox.io/s/icy-firefly-imvfu

如何实现一个贯穿始终的状态
1). 全局变量
用window.xxx即可，但太low了

2). useRef
useRef不仅可以用于div，还能用于任意数据

function App() {
  const nRef = React.useRef(0); // React.useRef(0)就返回一个{current: 0}
  const log = () => {
    setTimeout(() => console.log(`n: ${nRef.current}`), 3000);
  };
  return (
    <div className="App">
      <p>{nRef.current}</p>
      <p>
        <button onClick={() => (nRef.current += 1)}>+1</button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

上面的代码不管是先点+1还是先点log结果都一样
问题：但是我们视图里的0并没有改变，可控制台里的n却一直在变
原因：nRef.current += 1不会触发render不会重新渲染App
解决办法：通过修改state强制更新(不推荐使用)

const [n, setN] = React.useState(-1);
<button
   onClick={() => {
     nRef.current += 1;
     setN(nRef.current);
   }}
>
 +1
</button>

上面其实我们并没有用到n，所以我们可以简化一下

const update = React.useState(-1)[1];
<button
   onClick={() => {
      nRef.current += 1;
      update(nRef.current);
   }}
>

在线代码运行：https://codesandbox.io/s/crazy-mcclintock-1rb3l

3). useContext
useContext不仅能贯穿始终，还能贯穿不同组件

案例：https://codesandbox.io/s/wizardly-grothendieck-ek0i5

总结

每次重新渲染，组件函数就会执行

对应的所有state都会出现「分身」

如果你不希望出现分身，可以使用useRef/useContext

useState 原理

useState用法

最简单的useState的实现

改进思路：

使用useRef和useContext得到一个贯穿始终的状态

猜你喜欢

热点阅读