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;