React入门useStateuseRefuseContent等API讲解

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>
  );
}