先了解一下类组件和函数组件
react 的特点就是：一切皆为组件。其中，组件种类有很多，不同种类的组件有不同的功能。
我们熟知的组件种类：函数组件、类组件、受控组件、非受控组件、ui组件、容器组件、高阶组件等。
我们先介绍一下类组件和函数组件，让我们清楚为什么会有 hooks
-
类组件
其中，我们最熟悉的类组件，也就是有状态组件，是这个样子的：
import React, { Component } from 'react' export default class MyComponent extends Component { constructor(){ super(); this.state = { count:0 } } render() { return ( <div> 类组件 </div> ) } }类组件的特点就是功能强大。不仅有自己的状态 state ，还拥有自己的实例和一套完整的生命周期。在类组件里，你可以：
- 使用状态 state
- 使用完整的生命周期
- 访问 this
正是因为它太强大，所以也迎来了一个弊端：渲染速度慢
-
函数组件
顾名思义，函数组件就是一个 Function ：
function FnComponent(){ return ( <div> 函数组件 </div> ) }就那么简单，所以函数组件的渲染速度更快。考虑到性能问题，我们在开发的时候更推荐使用函数组件。但是也有一些问题：函数组件局限性太多，身上没有我们需要的 state 和 生命周期。
那怎么办呢？
它来了
react 16.8 版本中更新了强大的 hooks
【hooks ：n. 钩子；[机] 挂钩（hook的复数）】——来自有道翻译
简而言之， hooks 可以让函数组件拥有类组件的特点
下面将介绍一下几个 hooks 的使用
useState
实现了在函数组件中创建并使用 state
语法：
- 定义状态
const [变量名，修改变量函数] = useState(变量值)
- 取值
正常取值即可
- 赋值
函数名(新值)
函数名(回调函数)：回调函数的参数是当前值，返回值是新值注意：
- 如果定义的是一个对象的话，返回值需要是一个新的对象（克隆），因为对象是引用类型，所以只有对象的地址发生变化视图才会更新。
- hooks 只能在函数组件的内部调用。
import React,{ useState } from 'react'
function App() {
// useState 的使用
const [count,setCount] = useState(0);
return (
<div>
{/* 直接变量名取值 */}
<h2>{count}</h2>
{/* 修改变量的值 */}
<button onClick={()=>{setCount((val)=>(val+1))}}>点击+1</button>
<button onClick={()=>{setCount(0)}}>点击归零</button>
</div>
)
}
useEffect
让函数组件拥有特定的生命周期。
语法：
useEffect(参数1,参数2)
参数1：回调函数，就是在当前生命周期内需要做的事情
如果在当前函数
return了一个函数，那么返回的这个函数就是componentWillUnmount—— 销毁时执行的函数。参数2：对比值，根据参数2的不同来决定 useEffect 执行的是哪个生命周期。
- 参数2为
[]：模拟componentDidMount——挂载成功- 参数2为空：模拟
componentDidUpdate——更新成功
-
componentDidMount挂载成功import { useEffect } from 'react' // ... useEffect(()=>{ console.log('挂载成功') },[]) // ...
-
componentDidUpdate更新成功import { useEffect } from 'react' // ... useEffect(()=>{ console.log('更新成功') }) // ...
-
componentWillUnmount销毁时import { useEffect } from 'react' // ... useEffect(()=>{ // ... return ()=>{ console.log('销毁时') } }) // ...
useRef
在函数组件中获取到真实的dom结构
语法：
定义一个存储ref的变量
let dom = useRef在想要获取的标签的属性上定义ref属性
<h2 ref={dom}>你好</h2>获取dom
console.log(dom.current)--><h2>你好</h2>
import React,{ useRef,useEffect } from 'react'
export default function App() {
let dom = useRef();
useEffect(()=>{
console.log('挂载成功');
console.log(dom.current); // <h2>你好</h2>
},[])
return (
<div>
<h2 ref={dom}>你好</h2>
</div>
)
}
useReducer
它是函数组件中的状态管理方案，一般在简单的情况下用 useState 就足够了，在一些复杂的情况下适合使用 useReducer ，因为它可以在函数组件中操作action
操作方法和 Redux 中的状态管理相似
语法：
let [state,dispatch] = useReducer(reducer,myState)
参数：
- 回调函数——reducer
- 状态——state
返回值：
- state
- dispatch
import React,{ useReducer } from 'react'
// 定义 reducer 和 state
function reducer(state,action){
switch(action.type){
case "ADD": return {count:++state.count}
case "REDUCE": return {count:--state.count}
}
}
let myState = {
count:1
}
function App() {
// 使用 useReducer
let [state,dispatch] = useReducer(reducer,myState)
return (
<div>
<h2>{state.count}</h2>
<button onClick={addHandler}>+</button>
<button onClick={reduceHandler}>-</button>
</div>
)
function addHandler(){
let action = {type:"ADD"};
dispatch(action)
}
function reduceHandler(){
let action = {type:"REDUCE"};
dispatch(action)
}
}
export default App;
网友评论