【react】-Hooks的基本使用-【巷子】

平安顺 發表於 2019-6-17 00:15:00

【react】---Hooks的基本使用---【巷子】

一、react-hooks概念
 　　React中一切皆为组件，React中组件分为类组件和函数组件，在React中如果需要记录一个组件的状态的时候，那么这个组件必须是类组件。那么能否让函数组件拥有类组件的功能？这个时候我们就需要使用hooks。 　　Hooks让我们的函数组件拥有了类似类组件的特性，Hook是React16.8中新增的功能，它们允许您在不编写类的情况下使用状态和其他React功能
 
二、为什么React中需要类组件
　　1、需要记录当前组件的状态 　　2、需要使用组件的一些生命周期函数
 
三、类组件与Hooks简单对比
　　类组件
 
<div class="cnblogs_code">
<pre>import React from "react"

export default class App extends React.Component{
constructor(){
 super();
 this.state = {
 count:0
 }
 this.handleClick = this.handleClick.bind(this);
}
render(){
 let {count} = this.state;
 return (
 <div>
 <h2>{count}</h2>
 <button onClick={this.handleClick}>修改</button>
 </div>
 )
}
handleClick(){
 this.setState({
 count:this.state.count+1
 })
}
}</pre>
</div>
 
　　hooks
<div class="cnblogs_code">
<pre>import React,{useState} from "react";

export default ()=>{
let = useState(0);
let handleAdd = ()=>setCount(count+1);
return (
 <div>
 <h2>{count}</h2>
 <button onClick={handleAdd}>点击</button>
 </div>
 )
}</pre>
</div>
二者对比之后是不是感觉Hooks简单好多了？那么接下来我们来学习Hooks
 
 
四、Hooks基本使用
 
　　1、Hooks常用的方法 　　　　useState 、useEffect 、useContext以上三个是hooks经常会用到的一些方法
 
　　2、useState 　　　　useState是react自带的一个hook函数，它的作用就是用来声明状态变量.useState这个函数接收的参数是我们的状态初始值,它返回了一个数组，这个数组的第项是当
       前当前的状态值，第项是可以改变状态值的方法函数。
<div class="cnblogs_code">
<pre>import React,{useState} from "react"

export default ()=>{
let = useState(0);
let addCount = ()=>setCount(count+1);
return (
 <div>
 <h2>{count}</h2>
 <button onClick={addCount}>点击</button>
 </div>
 )
}</pre>
</div>
　　useState : 创建一个状态,这个状态为0 　　count : 代表当前状态值也就是0 　　setCount : 更新状态的函数 　　addCount = ()=>setCount(count+1);调用setCount就可以用来修改状态
 
　　2-1、useState返回的是什么？
<div class="cnblogs_code">
<pre>const = useState(0);

const state = useState(0);
const count = state;
const setCount= state</pre>
</div>
　　注意：
　　　　1、useState一定要写在函数初始的位置不能在循环或判断语句等里面调用，这样是为了让我们的 Hooks 在每次渲染的时候都会按照相同的顺序调用，因为这里有一个关键的问题，那就是 useState 需要依赖参照第一次渲染的调用顺序来匹配对于的state，否则 useState 会无法正确返回它对于的state
　　　　2、我们可以在一个函数组件中使用多个
<div class="cnblogs_code">
<pre>export default ()=>{
let = useState(0);
 let = useState(0);
 let = useState(0);

}</pre>
</div>
五、useEffect基本使用 　　我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如componentDidMount，componentDidUpdate和componentWillUnmount。而现在的useEffect就相当与这些声明周期函数钩子的集合体。它以一抵三。
　　　　　　　　　　　　(useEffect = componentDidMount + componentDidUpdate+componentWillUnmount)
 
　　5-1、useEffect 　　　　useEffect中有两个参数，第一个参数是一个函数，第二个参数是一个依赖的数据。第二个参数用来决定是否执行里面的操作，可以避免一些不必要的性能损失，只要第二个参数中的成员的值没有改变，就会跳过此次执行。如果传入一个空数组 [ ]，那么该effect 只会在组件 mount 和 unmount 时期执行。 
 　　5-2、useEffect模拟componentDidMount && componentDidUpdate
<div class="cnblogs_code">
<pre>import React,{useState,useEffect} from "react"

export default ()=>{
let = useState(0);
let updateTitle = ()=>setTitle(title+1);
return (
 <div>
 <h2>{title}</h2>
 <button onClick={updateTitle}>点击</button>
 </div>
 )

//参数是一个函数每次mount 或者 update都会调用当前函数
useEffect(()=>{
 document.title = `页面为${count}`;
})

}</pre>
</div>
　　
　　5-3、如何只在componentDidMount中执行
<div class="cnblogs_code">
<pre>import React,{useState,useEffect} from "react"

export default ()=>{
let = useState(0);
let updateTitle = ()=>setTitle(title+1);
return (
 <div>
 <h2>{title}</h2>
 <button onClick={updateTitle}>点击</button>
 </div>
 )

//将第二个参数设置为一个空数组则只会在componentDidMount中执行
useEffect(()=>{
 document.title = `页面为${count}`;
},[])

}</pre>
</div>
　　5-2、useEffect模拟componentWillUnMount 　　useEffect 中还可以通过让函数返回一个函数来进行一些清理操作，比如取消订阅等
<div class="cnblogs_code">
<pre>useEffect = (()=>{
return ()=>{
 //unmount时调用这里
 document.removeEventListener();
}
},[])</pre>
</div>
 
四、useEffect 什么时候执行？ 
　　它会在组件 mount 和 unmount 以及每次重新渲染的时候都会执行，也就是会在 componentDidMount、componentDidUpdate、componentWillUnmount 这三个时期执行
 
五、hooks的好处 　　面向生命周期编程变成了面向业务逻辑编程
  
来源：https://www.cnblogs.com/nanianqiming/p/11037565.html

頁: [1]

琼殿技术论坛's Archiver

【react】---Hooks的基本使用---【巷子】