react hooks学习
hooks 注意点
- hooks 在使用时必须保证其调用顺序，不能将 hooks 的调用放在 if for 等流程控制语句中，也不能将 hooks 调用放在子函数中。
- hooks 只能放在 函数组件或自定义 hook 的最外层调用。
状态钩子 useState
- react 自带一个 hook 函数，声明组件状态
- 参数可以设置 state 的初始值
- 返回值是一个只有两个元素的数组[状态，状态更新函数]
const [状态, 修改该状态的方法] = useState(初始值)
注意
1、在同一个函数中可以使用 useState 定义多个状态
2、useState 返回的状态是一个引用类型，修改时，只修改其中一个值，并不会帮我们进行浅合并
3、useState 返回的 setState 方法同样是异步方法 - 同样会被批处理所监管
副作用钩子 useEffect
- 可以取代声明周期函数 componentDidMount、componentDidUpdate、componentWillUnmonent
- 给函数式组件添加副作用
- 副作用（Dom操作，数据请求）hook - 主要用来处理组件中的作用类型，用于替代生命周期
useEffect(() => {
effect: 副作用函数,
return(() => {
cleanup 清理函数
})
}, [input]) input: 依赖参数
- 挂载阶段：从上到下执行函数组件，如果碰到 useEffect 就将其中的 effect 存储到一个队列中。当组件挂载完成之后，按照队列顺序执行 effect 函数，并获取 cleanup 函数，存储至一个新的队列
- 更新阶段：从上到下执行函数组件，如果碰到 useEffect 就将其中的 effect 存储到一个队列中。当组件更新完成之后，会将之前存储的 cleanup 函数队列，按照顺序执行。然后执行 effect 队列，并获取 cleanup 函数，存储至一个新的队列。在更新阶段会观察依赖参数的值有没有发生变化，如果没有变化就不执行对应的 cleanup 和 effect。
- 卸载阶段：找到之前存储的 cleanup 函数队列，依次执行
useEffect 依赖参数给不同值的情况；
- 情况一：为空或者为null
useEffect(() => {
console.log("useEffect");
});
这个时候，组件初始化、更新都会触发。
- 情况二：依赖参数为空数组
useEffect(() => {
console.log("useEffect");
}, []);
这个时候，只有组件初始化会触发。
- 情况三：依赖参数
useEffect(() => {
console.log("useEffect");
}, [state]);
这个时候，组件初始化会执行、只要有一个依赖参数有变化更新都会触发更新。
注意：
useEffect 是延迟执行的，如果想要同时执行，则需要用 useLayoutEffect
useLayoutEffect
和 useEffect 相识，唯一的区别就是 useLayoutEffect 是同步执行的。
使用场景：
一个对用户可见的 DOM 变更就必须在浏览器执行下一次绘制前被同步执行，这样用户才不会感觉到视觉上的不一致。
useRef
语法 const refContainer = useRef(initialValue);
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。
- useRef 除了可以保存实例之外，还可以保存组件更新前的一些数据
- 当 useRef 保存的是数据时，数据不会随着组件的更新而自动更新。一般可以用来保存一些接口的参数 params
案例
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const params = useRef({
name: "",
password: "",
});
const onButtonClick = () => {
// `current` 指向已挂载到 DOM 上的文本输入元素
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
useMemo
当依赖参数有变化时，执行相应函数，并返回函数的返回值
案例
const [count,setCount] = useState(10);
const [num,setNum] = useState(1);
const applePrice = useMemo(() => {
console.log('触发');
return count*18;
},[count]);
return <>
<div>count: {count}, 总价：{applePrice}元</div>
<button onClick={() => {
setCount(count+1);
}}>count+1</button>
<div>num: {num}</div>
<button onClick={() => {
setNum(num+1);
}}>num+1</button>
</>
useCallback
useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。
useContext
语法
const value = useContext(MyContext);
接收一个 context 对象
useContext(content) 相当于 <content.Consumer>
// index.js
const defaultContextValue = {
username: "dj",
};
// 创建一个context
const appContext = React.createContext(defaultContextValue);
// 根节点
ReactDOM.render(
<appContext.Provider value={defaultContextValue}>
<Robot />
</appContext.Provider>,
document.getElementById("root")
);
// 子组件
function Robot() {
const context = useContext(appContext);
return (
<p>{context.username}</p>
);
};
useReducer
语法
const [state, dispatch] = useReducer(reducer, initialArg, init);
useReducer 可以接收三个参数，reducer、initialArg、init。
- reducer 为 redux 的控制器；
- initialArg 为初始值；
- init 是一个方法，可以修改初始值想
案例
// 将字符串 "0" 变为 0
const init = (initArg) => {
return initArg - 0;
}
export default function HooksPage(props) {
const [state, dispatch] = useReducer(counterReducer, "0", init);
return (
<div>
<h3>HooksPage</h3>
<div>{state}</div>
<button onClick={() => dispatch({type: "ADD", payload: 1})}>add</button>
</div>
)
}
useImperativeHandle
语法 useImperativeHandle(ref, createHandle, [deps])
useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起
案例
function FancyInput(props, ref) {
const inputRef = useRef();
useImperativeHandle(ref, () => ({
focus: () => {
inputRef.current.focus();
}
}));
return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);
