React|React Hook篇
# 介绍
向下兼容
React从16.8之后支持Hook，官方虽说Hook是100%向后兼容，完全可选，没有计划移出class等一系列说辞，但是官方越来越靠近Hook，新项目开发建议直接使用Hook，老项目开发不建议重构
优点
更简洁，维护更方便
规律
Hook都是以use开头
# useState
介绍
useState是状态管理的偷懒方式，让无状态组件（后官方更名为函数组件）能像有状态组件一样使用状态管理
使用
引用简单变量，更新状态可以直接传值
import React, { useState } from 'react';
function App() {const [number, setNumber] = useState(1);
return (
{number}
)
}export default App;
更新状态可以直接传函数
import React, { useState } from 'react';
function App() {const [number, setNumber] = useState(1);
const changeNumber = (num) => {
setNumber(() => num);
}return (
{number}
)
}export default App;
如果是对象，状态不会合并，注意状态丢失
import React, { useState } from 'react';
function App() {const [stu, setStu] = useState({ name: "张三", age: 12 });
return ({stu.name}-{stu.age}
)
}export default App;
如果是数组，处理比较复杂可以在函数中处理
import React, { useState } from 'react';
function App() {const [arr, setArr] = useState([1, 2, 3, 4]);
const changeArr = () => {
arr.splice(0, 2, ["一", "二"]);
setArr(arr);
}return ({arr}
)
}export default App;
# useEffect
介绍 useEffect是生命周期的偷懒方式，让无状态组件能像有状态组件一样使用生命周期
useEffect可以看做是componentDidMount（DOM挂载完成），componentDidUpdate(组件更新) 和 componentWillUnmount（组件销毁）的组合
但实际上，useEffect比有状态组件的生命周期性能更高，使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快
状态 useEffect可以直接调用状态的值
useEffect调用状态是实时更新的，并不是一成不变
使用 语法：useEffect(fn,arr:Array?)
只有回调函数
会在DOM挂载完成时调用一次（官方说法第一次渲染之后），组件每次更新时调用
以下代码刚开始触发打印，之后每次操作都会触发
import React, { useState, useEffect } from 'react';
function App() {const [number, setNumber] = useState(1);
useEffect(() => {
console.log(1);
});
return (
{number}
)
}export default App;
第二个参数为空时，状态更新不会触发回调函数,但初始时会触发一次
import React, { useState, useEffect } from 'react';
function App() {const [number, setNumber] = useState(1);
useEffect(() => {
console.log(number);
}, []);
return (
{number}
)
}export default App;
第二个参数的数组中可以传入状态，那么此状态的更新就会触发回调函数
import React, { useState, useEffect } from 'react';
function App() {const [number, setNumber] = useState(1);
useEffect(() => {
console.log(number);
}, [number]);
return (
{number}
)
}export default App;
useEffect可以设置多个
import React, { useState, useEffect } from 'react';
function App() {const [number, setNumber] = useState(1);
useEffect(() => {
console.log(number);
}, [number]);
useEffect(() => {
console.log(number);
}, []);
return (
{number}
)
}export default App;
useEffect的回调函数中返回一个函数，这个函数在组件移除时调用。这个函数主要处理移除DOM侦听，清空定时器，清除订阅等
import React, { useState, useEffect } from 'react';
function App() {const [number, setNumber] = useState(1);
useEffect(() => {
return () => {
// 清除侦听 订阅 定时器等
}
});
return (
{number}
)
}export default App;
# useRef
介绍 可以获取DOM，可以存储变量
使用 必须通过 useRef 初始化一个值，这个值要绑定到需要获取的标签上
可以用 current 来获取绑定的DOM
import React, { useRef } from 'react';
function App() {const h1El = useRef(null);
const log = () => {
console.log(h1El.current);
}return (Hello React!
)
}export default App;
useRef如果有传入值，且不绑定ref，则 current 就不是获取DOM，而是初始的对象
import React, { useRef } from 'react';
function App() {const h1El = useRef({ name: "张三" });
const log = () => {
console.log(h1El);
// { current: {name: "张三"} }
}return (Hello React!
)
}export default App;
# useContext
介绍 上下文的Hook，方便上游组件像下游组件传值
使用 必须配合 createContext
当上游状态变化时，下游也会发生变化
import React, { useContext, createContext, useState } from 'react';
function App() {const MyContent = createContext();
const [number, setNumber] = useState(0);
const C1 = () => {
let number = useContext(MyContent);
return (子组件1
{number}
);
}const C2 = () => {
let number = useContext(MyContent);
return (子组件2
{number}
);
}return (
父组件{number} )
}export default App;
如果把父组件中更新状态的方法也传给子组件，那么子组件也能更新父组件状态
import React, { useContext, createContext, useState } from 'react';
function App() {const MyContent = createContext();
const [number, setNumber] = useState(0);
const C1 = () => {
const { number, setm } = useContext(MyContent);
return (子组件1
{number}
);
}return (
父组件{number}
)
}export default App;
拆分
// ./src/App.jsimport React, { useState } from 'react';
import MyContent from './MyContent/index';
import C1 from "./c1"function App() {const [number, setNumber] = useState(0);
return (
父组件{number}
)
}export default App;
// ./MyContent/index.jsimport { createContext } from 'react';
const MyContent = createContext();
export default MyContent;
// ./src/c1.jsimport React, { useContext } from 'react';
import MyContent from './MyContent/index';
export default function C1() {
const number = useContext(MyContent);
return (子组件1
{number}
)
}
# useMemo
触发时机 useMemo 是在状态更新时触发，useEffect 是在组件渲染后触发
import React, { useMemo, useEffect, useState } from 'react';
function App() {const [number, setNumber] = useState(0);
useEffect(() => console.log(`useEffect`));
useMemo(() => console.log(`useMemo`));
console.log("render");
return ({number}
)
}export default App;
以上代码会依次打印：useMemo render useEffect
语法 和 useEffect 相同， 可以接收两个参数
【React|React Hook篇】参数一：回调函数，初始和每次侦听的状态变化时执行
参数二（可选）：如果不传，侦听所有状态变化。空数组，不侦听所有变化。数组，列举侦听的状态
import React, { useMemo, useState } from 'react';
function App() {const [number, setNumber] = useState(0);
useMemo(
() => {
console.log(`useMemo`);
}, [number]);
return ({number}
)
}export default App;
用法 返回一个新状态，并可以在 render 中渲染这个状态
import React, { useMemo, useState } from 'react';
function App() {const [number, setNumber] = useState(0);
let newNumber = useMemo(
() => {
return number;
}, [number]);
return ({newNumber}
)
}export default App;
使用场景 避免重复渲染
import React, { useState } from 'react';
function App() {const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);
const num2 = 10;
const count = () => {
console.log(1);
return num2 + number1;
}return ({count()}
)
}export default App;
我们看到，无论 number1 还是 number2 更新，count 函数都会重新执行，但是 count 只与 number1 有关
import React, { useState,useMemo } from 'react';
function App() {const [number1, setNumber1] = useState(0);
const [number2, setNumber2] = useState(0);
const num2 = 10;
const count = useMemo(()=>{
console.log(1);
return num2 + number1;
},[number1])return ({count}
)
}export default App;
使用useMemo以后，只有当指定状态更新，才会重新计算
说明 useMemo 和 shouldComponentUpdate 类似，为了避免组件重复渲染，提高性能
useMemo 利用了 JavaScript 的缓存技术 memoization
# useCallback
作用 避免组件重新渲染，提高性能（和 useMemo 相同）
和useMemo不同的地方是 useCallback 返回的是函数
import React, { useState, useCallback } from 'react';
function App() {const [number, setNumber] = useState(0);
const count = useCallback(()=>{
return number;
},[number])return ({count()}
)
}export default App;
# useLayoutEffect
介绍 和 useEffect 语法相同，但是会阻塞视觉更新
如果能用 useEffect 就尽量避免使用 useLayoutEffect ，除非遇到BUG或解决不了的问题
触发时机 先于 useEffect 执行，即使组件销毁时，也先于 useEffect 执行
useLayoutEffect 调用时机为componentDidMount、componentDidUpdate
import React, { useEffect,useLayoutEffect } from 'react';
function App() {useEffect(()=> console.log(`useEffect`))
useLayoutEffect(()=> console.log(`useLayoutEffect`))
return (
<>
hello React!
)
}export default App;
# 自定义Hook
简介 就是普通函数，但是必须以use开头
做一些封装，方便使用
内部可以使用其他Hook
封装 例一：定义一个Hook，每次对相应的值 + 2
import React, { useState } from 'react';
function App() {const useCount = (count, val) => {
const [number, setNumber] = useState(count);
const add = () => setNumber(number + val);
return { number, add };
}const { number, add } = useCount(10, 2);
return (
<>
{number}
hello React!
)
}export default App;
例二：定义一个Hook，返回的方法可以得到当前变量的阶和
import React, { useState } from 'react';
function App() {const useCount = (index) => {const comp = (number) => number * (number + 1) / 2;
const [number, setNumber] = useState(index);
const [count, setCount] = useState(comp(index));
const add = () => {
setNumber(number + 1);
setCount(comp(number + 1));
}
return { number, add, count }
}const { number, add, count } = useCount(0);
return (
<>下标：{number}
阶和：{count}
hello React!
)
}export default App;
# useImperativeHandle
简介 可以在使用 ref 时自定义暴露给父组件的实例值
应避免使用 ref ，useImperativeHandle 要与 forwardRef 一起使用
forwardRef 我们先看一下，普通获取 ref 的情况
import React, { useRef } from 'react';
const C1 = () => {
return (子组件1hello world!
)
}function App() {const ref = useRef(null);
return (
<>
此时点击按钮时，获取到了h1的DOM
我们再来看一下组件时的情况
import React, { useRef } from 'react';
function App() {const ref = useRef(null);
const C1 = () => {
return (子组件1hello world!
)
}return (
<>
此时点击按钮时，获取的 DOM 为 null
而如果想获取组件内部的DOM，则必须把 ref 传到组件内部（注意不能用 ref，因为 props 不解析 ref）
import React, { useRef } from 'react';
const C1 = ({ Ref }) => {return (子组件1hello world!
)
}function App() {const ref = useRef(null);
return (
<>
此时点击按钮时，就获取了子组件的 DOM
获取子组件的 DOM ，还有另一种写法，就是forwardRef , 可以直接写 ref
import React, { useRef, forwardRef } from 'react';
const C1 = forwardRef((props, ref) => {return (子组件1hello world!
)
})function App() {const ref = useRef(null);
return (
<>
官方更推荐这种写法，此时 ref 不需要更名也能被读取
useImperativeHandle使用 如果父组件不想获取子组件的 DOM 而是方法和属性呢？就需要使用 useImperativeHandle
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
const C1 = forwardRef((props, ref) => {useImperativeHandle(ref, () => {
return { name: "张三" }
})return (子组件1hello world!
)
})function App() {const ref = useRef(null);
return (
<>
当然，用另一种方式也可，（不推荐）
import React, { useRef, useImperativeHandle } from 'react';
const C1 = ({ Ref }) => {useImperativeHandle(Ref, () => {
return { name: "张三" }
})return (子组件1hello world!
)
}function App() {const ref = useRef(null);
return (
<>
第三个参数表示侦听状态的变化，如果状态无变化，则参数二返回的值无更新
import React, { useRef, useImperativeHandle, useState } from 'react';
const C1 = ({ Ref }) => {const [num1, setNum1] = useState(0);
const [num2, setNum2] = useState(0);
useImperativeHandle(Ref, () => {
return { num1 }
}, [num2])return ({num1}
{num2}
)
}function App() {const ref = useRef(null);
return (
<>
当点击c1 5下，再点击获取 ref 时，num1 为0，再点击 c2 一次，再点击获取 ref 时，num1 为 5
# useReducer
介绍 useReducer 和 redux 中的 Reducer 是一样的，是一个函数
useReducer 是 useState 的替代方案，某些场景比 useState 更适用
useReducer 返回值是一个数组，第一个参数是状态 state ，第二个参数是分发 dispatch
使用 使用方式和 redux 一样，接收三个参数，前两个分别是 reduce 和初始状态 state
import React, { useReducer } from 'react';
function App() {const reducer = (state, action) => {
switch (action.type) {
case `changeName`:
return { ...state, name: action.payload }
case `changeAge`:
return { ...state, age: action.payload }
default:
return state;
}
}const data = https://www.it610.com/article/{ name:"张三", age: 12 };
const [state, dispatch] = useReducer(reducer, data);
return (
<>
{state.name} --- {state.age}
)
}export default App;
结合 useContext 实现 redux 的功能
抽离 redux
import React, { createContext, useReducer } from 'react'const stateInit = {
name: "张三",
age: 14
}const reduce = (state, action) => {
switch (action.type) {
case "changName":
return { ...state, name: action.payload }
case "changAge":
return { ...state, age: action.payload }
default:
return state;
}
}const MyContext = createContext();
export { MyContext };
export default (props) => {
const [state, dispatch] = useReducer(reduce, stateInit);
return (
{props.children}
)
}
实现 redux
import React, { useContext } from 'react';
import MyRedux, { MyContext } from "./MyRedux"const C1 = () => {
const { state, dispatch } = useContext(MyContext);
return (
<>子组件C1
{state.name}---{state.age}
)
}const C2 = () => {
const { state, dispatch } = useContext(MyContext);
return (
<>子组件C2
{state.name}---{state.age}
)
}function App() {return (
<>
)
}export default App;
下一篇：redux篇
推荐阅读
- 2018年11月19日|2018年11月19日 星期一 亲子日记第144篇
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- 拍照一年啦，如果你想了解我，那就请先看看这篇文章
- 亲子日记第186篇，2018、7、26、星期四、晴
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- 两短篇
- 第四十三篇接纳孩子的感受
- 感恩日记第111篇2020.02.06
- 2018年8月25日|2018年8月25日 星期六 晴 亲子日记第259篇
- 25篇中考随笔