【react-hooks】useRef、createRef、useState、useContext、useReducer

useState

使用

const [count, setCount] = useState(0);

useRef

使用

<input ref={inputEl} type="text" /> 
##############
let inputEl= useRef()
#############
inputEl.current.value  // 可以的打斗文本框的 value 值

useState 与 useRef 区别

代码示例区别

1、 useState触发重新渲染，useRef不触发（变量是决定视图图层渲染的变量，请使用useState，其他用途useRef） ------- 显示的是当前点击的值

2、useState 的 setN不会改变n（原始数据），而是产生新的数据。如果不希望出现新的n：可以使用 useRef 或 useContext 等

3、采用useRef （useRef 类似于类组件的 this）-------显示的是实时值
优点：从始至终只有一个n，且可以直接对n操作
缺点：n改变，不会自动渲染页面，只能手动更新

4、useRef 是定义在实例基础上的，如果代码中有多个相同的组件，每个组件的 ref 只跟组件本身有关，跟其他组件的 ref 没有关系。

useRef与createRef的区别

1、组件依赖的props以及state状态发生变更，触发更新时 。createRef每次都会返回个新的引用;而useRef不会随着组件的更新而重新创建

useContext

1.使用createContext 创建Context对象
2.在顶层组件通过Provider 提供数据
3.在底层组件通过useContext函数获取数据

使用

const themeContext = React.createContext(null);

function App() {
  const [theme, setTheme] = React.useState("red");
  return (
    // themeContext.Provider 建立一个局部做用域
    // 其中里面的全部组件均可以使用setTheme这个函数
    <themeContext.Provider value={{ theme, setTheme }}>
      <div>
        <p>{theme}</p>
        <div>
          <ChildA />
        </div>
       
      </div>
    </themeContext.Provider>
  );
}

function ChildA() {
  // ChildA这个子组件内部想使用父组件setTheme函数的方式
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("red")}>red</button>
    </div>
  );
}

useReducer

使用

const [state, dispatch] = useReducer(reducer, initialState)

这里简单介绍以上面的几个变量：

• initialState：需要我们自己定义，是我们要管理的一个初始变量。可以是一个数字，字符串，数组，对象等。
• reducer：是我们自己定义的一个纯函数，它的作用就是通过定义好的逻辑来改变initialState初始变量，为我们的项目服务。
• state：reduce里面的逻辑处理数据之后，会返回一个最新的值，就是这个state
• dispatch：触发器，reducer中会定义很多条件，具体要使用哪一个条件来改变initialState变量呢，就是要通过触发器来控制。

总结起来一句话：我们使用dispatch来触发reducer纯函数，用reducer纯函数中的逻辑修改initialState，得到一个新的变量，把这个变量赋值给state，最终返回。

用例

import React, { useReducer } from 'react';

const initialState = 0;
const reducer = (state, action) => {
  switch (action) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return 0;
    default: throw new Error('Unexpected action');
  }
};

const Example01 = () => {
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      {count}
      <button onClick={() => dispatch('increment')}>+1</button>
      <button onClick={() => dispatch('decrement')}>-1</button>
      <button onClick={() => dispatch('reset')}>reset</button>
    </div>
  );
};

export default Example01;