useState

语法:
const [n, setN] = React.useState(0);

0是n的默认值,setN是操作n的函数

setN:

  1. 我们以为setN会改变n,但是事实往往出乎意料,n并不会变,他是将改变后的数据存到一个数据里面(具体在哪里我们先定为x),而不是直接赋值去改变n
  2. setN一定会触发组件的重新渲染

useState:

  1. useState肯定会从x那里,读取到n的最新值

x:

  1. 每个组件都有自己的x,这个x我们命名为state

useRef

语法:

const nRef = React.useRef(0);nRef.current(表示当前的值)

nRef.current:

  1. 当值改变了不会重新render

useContext

const themeContext = React.createContext(null);function App() {  const [theme, setTheme] = React.useState("red");  return (    // themeContext.Provider 创建一个局部作用域    // 其中里面的所有组件都可以使用setTheme这个函数    <themeContext.Provider value={{ theme, setTheme }}>      <div className={`App ${theme}`}>        <p>{theme}</p>        <div>          <ChildA />        </div>        <div>          <ChildB />        </div>      </div>    </themeContext.Provider>  );}function ChildA() {  // ChildA这个子组件内部想使用父组件setTheme函数的方式  const { setTheme } = React.useContext(themeContext);  return (    <div>      <button onClick={() => setTheme("red")}>red</button>    </div>  );}