前言
本篇文章带大家学习react中hooks的用法，自己也是在学习过程中进行记录，如果有总结不恰当的地方欢迎大家指出来，一起交流~
Hook简介
为什么会出现Hook
1.在我们之前对react的学习中我们知道,class组件可以定义自己的state,用来保存组件自己内部的状态,function组件是没有状态的,因为函数式组件的变量他是局部的,每次调用都会开辟新的空间和新的变量,函数运行完毕以后,变量会被回收。
2.class组件有生命周期,我们可以在对应的生命周期中完成自己的逻辑,class组件在状态改变的时候会重新去执行render方法。而函数式组件在重新渲染的时候,会全部执行,又没有办法去调用componentDidUpdate,并且没有自己的状态。
什么是Hook
Hook是React16.8的新增特性。它可以让你在不编写class组件的情况下使用state以及其他的React特性(生命周期方法)。
Hook的出现,是开创性的,它解决了之前React存在的很多问题,比如说HOC的嵌套问题。
Hook的使用场景
- Hook的出现,基本可以替代我们之前所使用的calss组件的地方
- 在旧的项目中,不需要直接重构为Hook
- Hook只能在函数组件中使用,不能在类组件,或者函数组件之外的地方使用
Hook的使用原则
- 不要在循环里面、条件判断或者分支里面去使用Hook,只能在函数的最外层调用
- 只能在react函数组件中使用hook
- 单独在一个useState我们称之为hook,Hooks是对一类Hook的总称。
Hook实现累加器
在使用hook之前，我们先使用之前学习的类组件来实现累加器：
export class Add extends Component {
state = { count: 1 }
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.add}>点击</button>
</div>
)
}
add = () => {
this.setState({count: this.state.count + 1})
}
}比较简单，大家应该都能很快的实现，下面来使用hook实现这个累加器：
1.头部我们要引用一个新的东西useState，后面需要使用它
2.useState本身是一个函数,调用之后返回一个数组，第一项是状态，第二项是修改和设置我们状态的函数方法
3.定义一个state接收arr[0]，定义变量setState为arr[1]，也就是拿到第二项函数
4.给按钮绑定点击事件，实现累加效果
import React, { useState } from 'react'
export default function App() {
const arr = useState(0)
const state = arr[0]
const setState = arr[1]
return (
<div>、
<h1>Hook</h1>
<p>{state}</p>
<button onClick={(e) => setState(state + 1)}>点击</button>
</div>
)
}
实现效果：
当然了，这里代码我们还可以使用解构进行精简：
export default function App() {
const [state, setState] = useState(0)
return (
<div>
<p>{state}</p>
<button onClick={(e) => setState(state + 1)}>+1</button>
<button onClick={(e) => setState(state - 1)}>-1</button>
</div>
)
}
多个状态(案例)
上面讲的是一个状态，来看看多个状态怎么操作，写个简单的例子：
1.首先还是头部引入 useState
2.然后对要用到的数据进行结构，这里也定义了数组和对象的数据类型
3.需要用到的地方直接{age}使用即可
4.需要做操作的地方，使用结构的第二项函数进行操作即可，这里按钮就是给city数组添加元素
import React, { useState } from 'react'
export default function App() {
const [age, setAge] = useState(18)
const [money, setMoney] = useState(1000000000)
const [city, setStar] = useState(['北京', '上海', '广州'])
const [obj, setObj] = useState({name: '张三', age: 14})
return (
<div>
<h1>张三同学： {age}岁</h1>
<h2>他的存款： {money}万</h2>
<ul>
{
city.map((item, index) => {
return (<li key={item}>{item}</li>)
})
}
</ul>
<h3>{obj.name}今年{obj.age}岁</h3>
<button onClick={e=>{setStar([...city, '深圳'])}}>给数组加元素</button>
</div>
)
}
实现效果：
·
复杂状态(案例)
这里我们实现一个模拟电影票的案例，点击按钮可以实现票价的调整
1.前面把数据解构就不说了
2.这里要通过点击每一项后面的按钮，改变对应项的票价，所以在函数中需要把index下标传入进去
3.然后在函数中，先把操作的数组拷贝一份，然后让里面对应index的数据项的价格改变，最后用setMovies进行修改
export default function App() {
const [movies, setMovies] = useState([
{id: 1, name: '守岛人', price: 50},
{id: 2, name: '1921', price: 35},
{id: 3, name: '哆啦A梦', price: 60},
{id: 4, name: '中国医生', price: 40},
{id: 5, name: '时间规划局', price: 55}
])
function changePrice(index) {
console.log(index)
const movieList = [...movies]
movieList[index].price += 5
setMovies(movieList)
}
return (
<div>
<ul>
{
movies.map((item, index) => {
return (
<li key={item.id}>
<span>电影名:《{item.name}》</span>
<span>票价:￥{item.price}</span>
<button onClick={e => changePrice(index)}>涨价了</button>
</li>
)
})
}
</ul>
</div>
)
}使用之前状态值
如果我们需要使用之前的状态值来改变现有状态值，应该如何去做呢？
看下面例子：需求是做一个累加100的操作
1.==如果新state需要通过使用先前的state计算或者操作的话，我们可以使用函数传递给setstate,这个函数可以接收之前的值，并且返回更新后的值==
2.所以在点击事件中，使用setstate的参数，也就是先前的state，对该参数进行操作
export default function App() {
const [state, setstate] = useState(() => 100)
return (
<div>
<h1>{state}</h1>
<button onClick={e => setstate((prev) => prev + 100)}>+100</button>
</div>
)
}最后
本篇文件就到这里结束啦，主要给大家介绍了hooks中对于状态的用法，下篇文章会给大家继续讲解hooks它的生命周期相关的知识~
