Hooks?
- hook是React 16.8.0 增加的新特性/新语法。
- 可以在函数组件中使用state以及其他的React特性
常用的Hook 属性
- State Hook: React.useState()
- Effect Hook: React.useEffect()
- Ref Hook: React.useRef()
State Hook
- 组件可以有state状态，可以执行数据的读写操作
- 语法: const [xxx, setXxx] = React.useState(initValue)
// useState()说明
// loading为定义的变量
// setLoading 可对变量进行操作的行数
// false 则是变量的初始值。仅在初始化时loading=false，之后将不在调用const [loading, setLoading] = useState(false);//setLoading()写法1：直接指定新状态值覆盖原来的状态值。
//在回调函数中避免使用此方法，会造成数据不更新
setLoading(true)//setLoading()写法2：参数为函数，接收原本的状态，在进行改值。
setLoading(value => value)
Effect Hook
- 用于模拟类组件中的生命周期钩子
- 可发ajax请求数据获取，设置订阅 / 启动定时器等
- 语法：useEffect()
- 可以把 useEffect Hook 看做如下三个函数的组合
componentDidMount()
componentDidUpdate()
componentWillUnmount()
useEffect(() => {//根据useEffect的第二个参数判断，此处相当于调用componentDidMount()还是componentDidUpdate()//第二个参数：如果为空数组，则表示执行一次。//第二个参数：如果不传，则表示监听所有state值，如果发生改变则再次执行//第二个参数：如果传某一个变量，则表示监听该变量，如果该变量发生改变则再次执行return()=>{//此处相当于调用componentWillUnmount()}}, [])
Ref Hook
- Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
- 语法: const refContainer = useRef(initialValue)
- 作用:保存标签对象,功能与React.createRef()一样
const ref = useRef()<Merchant ref={ref} ></Merchant>//还可以结合useImperativeHandle forwardRef 使用，进行组件间通信//父组件
const { form } = ref.current//子组件
useImperativeHandle(ref, () => {return {form: formSearch}});
forwardRef(Merchant)