react----Hooks的基本使用
作者:互联网
一、react-hooks概念
React中一切皆为组件,React中组件分为类组件和函数组件,在React中如果需要记录一个组 件状态得时候,那么这个组件必须是类组件,那么能否让函数组件拥有类组件得功能?这时候 我们就需要使用hook
Hooks让我们函数组件拥有了类似组件得特性,Hook是React16.8中新增得功能,他们允许 您在不编写类的情况下使用状态和其他React功能
二、为什么React中需要类组件
1、需要记录当前组件的状态 2、需要使用组件的一些生命周期
三、类组件与Hooks对比
import React, { Component,Fragment} from "react"; export default class App extends Component{ constructor(){ super(); this.state = { n:0 } this.handleClick = this.handleClick.bind(this) } render(){ let {n} = this.state return( <div> <h3>{n}</h3> <button onClick={this.handleClick}>修改</button> </div> ) } handleClick(){ this.setState({ n:this.state.n+1 }) } } 函数组件 import React, { Component,Fragment,useState} from "react"; export default ()=>{ let [n,setCount] = useState(0); const handleClick = ()=>{ n+=1; setCount(n) } return ( <div> <h3>{n}</h3> <button onClick={handleClick}>点击</button> </div> ) } useState:创建一个状态,这个状态为0 n:代表当前状态值也是0 setCount:更新状态的函数
四、Hooks常用的方法
useState、useEffect、useContext
useState:函数 存储的当前组件的一些状态 参数:所需要的状态值 返回值:数组 1.当前状态的Key值 2.修改当前状态的函数
五、useEffect基本使用
模拟组件状态的一些生命周期 比如:componentDidMount、componentDidUpdate、componentWillUnmount
useEffect中有两个参数 第一个参数是一个函数, 第二个参数是一个依赖的数据。 第二个参数用来决定是否执行里面的操作,可以避免一些不必要的性能损失, 只要第二个参数中的成员的值没有改变,就会跳过此次执行。 如果传入一个空数组[],那么该effect只会在组件mount和unmount时期执行
useEffect模拟componentDidMount && componentDidUpdate
import React, { Component,Fragment,useState,useEffect} from "react"; export default ()=>{ let [n,setCount] = useState(0); const handleClick = ()=>{ n+=1; setCount(n) } useEffect(() => { console.log(111) }) return ( <div> <h3>{n}</h3> <button onClick={handleClick}>点击</button> </div> ) }
只在componentDidMount中执行
import React, { Component,Fragment,useState,useEffect} from "react"; export default ()=>{ let [n,setCount] = useState(0); const handleClick = ()=>{ n+=1; setCount(n) } useEffect(() => { console.log(111) },[]) return ( <div> <h3>{n}</h3> <button onClick={handleClick}>点击</button> </div> ) }
useEffect模拟componentWillUnMount
useEffect中还可以通过让函数返回一个函数来进行一些清理操作(比如事件的移除)
useEffect(() => { console.log(111) return()=>{ console.log("卸载") } },[])
标签:基本,React,Hooks,setCount,react,useState,handleClick,组件,useEffect 来源: https://www.cnblogs.com/ccyq/p/11380301.html