前言
react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他 react特性,而不仅限于 class 组件。react hooks 的出现,标示着 react中不会在存在无状态组件了,只有类组件和函数组件。具体可查看官网。
优势:
- 函数组件不能使用state,遇到交互更改状态等复杂逻辑时不能更好地支持,hooks让函数组件更靠近class组件,拥抱函数式编程。
- 解决副作⽤问题,hooks出现可以处理数据获取、订阅、定时执行任务、手动修改 ReactDOM这些⾏为副作用,进行副作用逻辑。比如useEffect。
- 更好写出有状态的逻辑重用组件。
- 让复杂逻辑简单化,比如状态管理:useReducer、useContext。
- 函数式组件比class组件简洁,开发的体验更好,效率更⾼,性能更好。
- 更容易发现无用的状态和函数。
自定义Hooks
官网:https://reactjs.bootcss.com/docs/hooks-custom.html
例子:
import React,{useEffect} from 'react'
//封装的Hooks⽤用use开头
const useChangeTitle= (title) =>{
useEffect(()=>{ document.title=title
},[title]) }
exprot default (props)=>{ useChangeTitle("⾃自定义修改标题Hooks") return (
<div> 测试⾃自定义Hooks
</div> )
}
Hooks使用规则
官网:https://reactjs.bootcss.com/docs/hooks-rules.html
- 只在顶层调⽤Hooks Hooks的调⽤,尽量只在顶层作⽤域进行调用不要在循环,条件或者是嵌套函数中调⽤Hook,否则可能会⽆无 ,确保每次组件渲染时都以相同的顺序调⽤Hook。
- 只在函数组件调⽤Hooks,React Hooks目前只支持函数组件,所以⼤大家别在class组件或者普通的函数⾥面调⽤Hook钩⼦函数
- React Hooks的应用场景在函数组件,自定义hooks
在未来的版本React Hooks会扩展到class组件,但是现阶段不能再class⾥使⽤。