79. Hooks原理解析

79. Hooks原理解析

最简单的useState

例子

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

function App() {
  const [n, setN] = React.useState(0);
 
  return (
    <div>
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
       
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

 

https://codesandbox.io/s/hook-6rpt3?from-embed

如何让两个useState不冲突

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

//手写useState
let _state = [];
let index = 0;
const myUseState = (initialValue) => {
  const currentIndex = index;
  _state[currentIndex] =
    _state[currentIndex] === undefined ? initialValue : _state[currentIndex];

  const setState = (newValue) => {
    _state[currentIndex] = newValue;
    render();
  };
  index += 1;
  return [_state[currentIndex], setState];
};

const render = () => {
  index = 0;
  ReactDOM.render(<App />, rootElement);
};
function App() {
  console.log("App 运行了");
  const [n, setN] = myUseState(0);
  const [m, setM] = myUseState(0);
  console.log(`n:${n}`);
  console.log(`m:${m}`);
  return (
    <div className="App">
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
      </p>
      <p>{n}</p>
      <p>
        <button onClick={() => setM(m + 1)}>+1</button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/hook-6rpt3

useState不能写在if里

总结

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

每个节点保存着state和index

useState会读取state[index]

index由useState出现的顺序决定

setState会修改state，并触发更新

useRef

setN( )不会改变n的值。

两种操作：

1.点击+1再点击log---无bug //n:1

2.点击log再点击+1---有bug //n:0

问题：为什么log出了旧数据

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

function App() {
  const [n, setN] = React.useState(0);
  const log = () => setTimeout(() => console.log(`n: ${n}`), 3000);

  return (
    <div>
      <p>{n}</p>
      <p>
        <button onClick={() => setN(n + 1)}>+1</button>
        <button onClici={log}>log</button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/usestate-u319x

Screen Shot 2022-03-08 at 9.11.44 AM

如果我希望有一个贯穿始终的状态，怎么做？办法很多

• 全局变量

  • 用window.xxx即可，但太low了

• useRef

  • useRef不仅可以用于div，还能用于任意数据

  • useRef例子

  • 强制更新的例子（不推荐使用）

• useContext

  • useContext不仅能贯穿始终，还能贯穿不同组件

  • useContext例子

import React from "react";
import ReactDOM from "react-dom";
const rootElement = document.getElementById("root");

function App() {
  const nRef = React.useRef(0); //useRef的值就是{current:0}
  const log = () => setTimeout(() => console.log(`n:${nRef.current}`), 1000);
  const update = React.useState(null)[1];
  return (
    <div className="App">
      <p>{nRef.current} 这里并不能实时更新</p> {* useRef不能实时更新*}
      <p>
        <button
          onClick={() => {
            nRef.current += 1;
            update(nRef.current);//这一步手动让App更新
          }}
        >
          +1
        </button>
        <button onClick={log}>log</button>
      </p>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/useref-r9yzw

useContext & 总结

useContext非常适合拿来切换主题

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const rootElement = document.getElementById("root");

const themeContext = React.createContext(null);

function App() {
  const [theme, setTheme] = React.useState("red");
  return (
    <themeContext.Provider value={{ theme, setTheme }}>
      <div className={`App ${theme}`}>
        <p>{theme}</p>
        <div>
          <ChildA />
        </div>
        <div>
          <ChildB />
        </div>
      </div>
    </themeContext.Provider>
  );
}

function ChildA() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("red")}>red</button>
    </div>
  );
}

function ChildB() {
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("blue")}>blue</button>
    </div>
  );
}

ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/wizardly-grothendieck-ek0i5

createContext就是一个局部的上下文变量

总结

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

• 对应的所有state都会出现“分身”

• 如果你不希望出现分身

• 可以用useRef/useContext等