React hooks
React-hooks是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能。
参考:https://reactjs.org/docs/hooks-intro.html
React Hooks 优势:
- 简化组件逻辑
- 复用状态逻辑
- 无需使用类组件编写
常用 hook:
- useState
const [state, setState] = useState(initialState); - useEffect
类组件 componentDidMount、componentDidUpdate 和 componentWillUnmount
需要清除的副作用 - useRef
注:UseState useEffect useRef 三个都需要从react中引入。
UseState的使用:
import React,{useState} from 'react'
在函数组件内使用,定义数据
/*
let[状态的值,修改状态的方法]=useState(状态的初始值)
*/
let [data,setName]=useState({name:'浩克',age:18})
let [show,setShow]=useState(true)
往子组件传数据
<Child data={data}></Child>
点击改变数据
<button onClick={()=>{
setName({
name:'疯狂浩克',
age:data.age
})
}}>点击变身</button>
useEffect的使用:
import React,{useState,useEffect} from 'react'
三种事件状态在一块的写法 中括号为触发函数的值
第一次加载会触发挂载和更新,然后改变数据三种状态都会触发(副作用)
// useEffect(()=>{
// console.log('挂载 更新')
// return()=>{
// console.log('卸载')
// }
// },[age])
三种事件状态分开写
挂载阶段 页面初次渲染触发
useEffect(()=>{
console.log('挂载')
},[])
卸载 点击卸载后触发
useEffect(()=>{
return()=>{
console.log('卸载')
}
},[])
更新 数据发生改变时触发
useEffect(()=>{
console.log('更新')
},[age])
useRef的使用:
import React,{useState,useEffect,useRef} from 'react'
在函数内定义
let ageP=useRef()
模板中使用ageP
<h2 ref={ageP}>age:{age}</h2>
挂载中使用ageP
useEffect(()=>{
console.log(ageP)
})
Hook 使用规则
- 只在最顶层使用 Hook
- 只在 React 函数中调用 Hook
React 函数组件中
React Hook 中 - 我自己定义 hook 时,可以调用别的hook - 所有的 hook 必须 以 use