一、React Hooks(钩子)是什么
React哲学:一切皆组件
类组件
class Counter extends Component {
render () {
return "Hello World"
}
}
复制代码
函数组件
const Counter = () => {
return "Hello World"
}
复制代码
为什么说函数式组件更优?
- 简单易懂
- 更符合React哲学,可以理解为React就是一个画UI的工具,符合UI=f(state)的原则
- 函数式编程
有hooks之前,为什么React需要类组件?
- 需要状态(state)
class Counter extends Component {
state = {
count: 0
}
}
复制代码
- 需要生命周期函数
shouldComponentUpdate () { // 减少render渲染
return true
}
复制代码
- 需要副作用操作(非纯函数)
副作用:调用ajax等
纯函数:每次输入的参数一样,那么每次返回的结果都相同。不要改全局变量,不要做ajax请求,不要去做异步操作等
componentDidMount () {
fetchAPI().then(res => {
this.setState({count: res})
})
}
复制代码
能否让函数组件拥有这些功能?
const Counter = () => {
return `
想拥有,可是我没办法拥有状态,也没有生命周期函数,更不要说副作用操作了
`
}
复制代码
Hooks拥有了这些功能
useState 状态管理
useEffect 生命周期函数
useContext
等等...
复制代码
二、React Hooks带来哪些好处
useState: 在函数中管理状态
const Counter = () => {
const [count, setCount] = useState(0) // 解构 初始值0
const increment = () => setCount( count + 1 )
return (
<>
<h1>{count}</h1>
<button onClick={increment}>+</button>
</>
)
}
复制代码
useState的返回值是什么?
const [count, setCount] = useState(0)
可以改为下面的写法:
const state = useState(0)
const count = state[0]
const setCount = state[1]
复制代码
三、常用 Hooks 使用技巧
HoC : Higher order Component(With开头)
有了useState这个hook之后,就可以在组件里管理状态了
useState 一般写在函数的最上面
useState:返回结果可以任意取名
const [count, setCount] = useState(0)
也可写成
const [count, updateCount] = useState(0)
useState是怎么做到的?
想象一下React为每一次useState调用分配一个“空间”
React通过useState调用顺序辨别各个“空间”,很简单,就是通过调用顺序来区分的!
复制代码
useState执行顺序必须一致!
不能写在if判断里,如下
const Counter = () => {
const [count, setCount] = useState(0)
if (count % 2 === 0) {
const [bar, setBar] = useState(null) // 不能这么写
}
const [foo, setFoo] = useState("foo")
}
const [count, setCount] = useState(0) // 两个useState 根据调用顺序区分
const [name, setName] = useState("Fruit Bro") // 两个useState 根据调用顺序区分
setCount(count + 1)
setCount也是异步的,是setState的变种!
复制代码
useEffect:有机会做副作用操作
componentDidMount 用于在mount过程结束时的副作用
componentDidUpdate 用于在update过程结束时的副作用
useEffect = componentDidMount + componentDidUpdate
复制代码
useEffect模拟componentDidMount
useEffect(() => {
// 每次mount或update都会调用到这里
})
useEffect(() => {
// 只有mount时调用这里
},[]) // []代表依赖的数据
复制代码
useEffect模拟componentDidUnmount
useEffect(() => {
// 只有mount时调用这里
return () => {
// 只有unmount时调用这里
}
},[])
复制代码
hooks特有而类组件没有的是componentDidUnupdate,类似componentDidUnmount
useEffect模拟componentDidUpdate
const mounted = useRef() // useRef()不管调用多少次,返回的结果完全是一样的
useEffect(() => {
if (!mounted.current) {
// 初次mounted,其实有用的就是current
mounted.current = true
} else {
// do componentDidUpdate logic
}
})
复制代码
ref可以访问真正的dom,但在React中,是非常介意直接操作真实DOM的,因此用vitural dom
注意:每一次渲染都有独立的props和state,每一次渲染使用hooks,函数组件的每一次渲染,无论是mount还是update,不管是第几次update,它都有独立的props和state
const Counter = () => {
const [count, setCount] = useState(0)
const onClick = () => {
setCount(count + 1)
setTimeout(() => {
// 返回0的原因,初次为0,只有再次渲染的时候count才会为1,而每次渲染都有独立的props和state,因此新的渲染不会影响上一次的值
alert(count) // 0 每一次新的执行就是一次新的开始
}, 1000)
}
return (
<>
<h1>{count}</h1>
<button onClick={onClick}>+</button>
</>
)
}
复制代码
useContext: 简化Context的使用
Hooks之前
<Context.Consumer>
{contextValue => <h1>{contextValue}</h1>}
</Context.Consumer>
Hooks之后
const contextValue = useContext(Context)
<h1>{contextValue}</h1>
复制代码
四、React Hooks有哪些好处
Hooks的好处
-
降低了组件的复杂性
1.1 完全使用函数组件
1.2 无需生命周期函数
1.3 更好的状态管理
-
更好的代码重用性
2.1 传统的代码重用方式 组件、高阶组件(HoC)、render props模式
2.2 Hooks下的代码重用方式:函数
定制Hooks: 函数形式的代码重用
// Beacon 计数
const useBeacon = () => {
const [renderCount, setRenderCount] = useState(0)
useEffect(() => {
sendBeacon()
})
}
// 重用
const Foo = () => {
useBeacon();
...
}
const Bar = () => {
useBeacon();
...
}
复制代码
五、如何迁移到Hooks
React v16.8.0开始正式支持Hooks
原有类组件功能依然支持
业界趋势将是向函数组件倾斜
迁移策略
了解Hooks
对新组建使用Hooks
逐步替换原有类组件
hooks如何处理类组件的shouldComponentUpdate来做性能优化 memo
如有错误,欢迎指正!谢谢!