带你体验react Hooks【黑马web前端】

更新时间:2019年07月26日 11时17分41秒来源:黑马程序员论坛

#### Hooks 简介
> React 16.8新特性。它可以让你在不编写class的情况下使用state以及其他react特性
#### 使用useState Hook实现计数器

[JavaScript] 纯文本查看 复制代码

import React, { useState, Fragment } from 'react'
import ReactDOM from 'react-dom'
function NumCount() {
const [ count, setCount ] = useState(0)
const Click = () => {
setCount(count + 1)
}
return (
<Fragment>
<p>You clicked {count} times</p>
<button onClick={Click}>Clicl Me</button>
</Fragment>
)
}
ReactDOM.render(<NumCount />, document.getElementById('root'))

> 在这里，useState 就是一个Hook.通过在函数组件中调用它用来给组件添加一些内部的state。useState会返回一队值，当前状态和让你更新它的函数，你可以在事件处理函数中或者其他一些地方调用这个函数。它类似于class中this.setState,但是它不会吧新的state和旧的state进行合并
#### 等价的class组件示例（计数器）

[JavaScript] 纯文本查看 复制代码

import React, { Fragment } from 'react'
import ReactDOM from 'react-dom'
class NumCount extends React.Component {
state = {
count: 0
}
render() {
return (
<Fragment>
<p>You clicked {this.state.count} times</p>
<button onClick={this.Click.bind(this)}>Click Me</button>
</Fragment>
)
}
Click() {
this.setState({
count: this.state.count + 1
})
}
}
ReactDOM.render(<NumCount />, document.getElementById('root'))

#### 那么什么是Hook？
**Hook是一些可以让你在函数组件中'勾入'React State 及生命周期等特性的函数**
**React内置了一些像useState这样的Hook,当然也可以通过创建自己的Hook来复用不同组件之间的状态逻辑。**
**Hook 允许我们通过代码的用途分离它们**
#### useEffect hook 实现计数器将count显示在document.title上

[JavaScript] 纯文本查看 复制代码

function Count() {
const [ count, setCount ] = useState(0)
const clickHandle = () => {
setCount(count + 1)
}
useEffect(
() => {
let timer = setInterval(() => {
setCount(count + 1)
}, 1000)
return () => {
clearInterval(timer)
}
},
[ count ]
)
return (
<Fragment>
<p>You clicked {count} times</p>
<button onClick={clickHandle}>Click Me</button>
</Fragment>
)
}

> useEffect可以看作componentDidMount,componentDidUpdate,componentWillUnmount三个钩子函数的组合,**解决了class生命周期函数经常包含不相关的逻辑，但是又把相关逻辑分离到几个不同的方法中去。**
#### 等价的class组件实现

[JavaScript] 纯文本查看 复制代码

class Count extends React.Component {
state = {
count: 0
}
render() {
return (
<Fragment>
<p>You clicked {this.state.count} times</p>
<button onClick={this.clickHandle.bind(this)}>Click Me</button>
</Fragment>
)
}
componentDidMount() {
document.title = `You clicked ${this.state.count} times`
}
componentDidUpdate() {
document.title = `You clicked ${this.state.count} times`
}
clickHandle() {
this.setState({
count: this.state.count + 1
})
}
}

> 比较发现class组件中需要在两个生命周期函数中写重复的代码。
##### 出现动机
**解决了编写和维护组件时遇到的各种各样不相关的问题**
1.在组件之间复用状态逻辑很难
- React没有提供将一些可复用的行为“附加”到组件的途径（如：把组件连接到store），虽然我们可以通过**render props**和**高阶组件**来解决此类问题，但是会很麻烦使自己的代码难以理解。
1. 说明了一个问题： **React需要为共享状态逻辑提供更好的原生途径**
2. 使用Hooks可以从组件中提取状态逻辑，使得这些逻辑可以单独测试并且复用。**Hooks可以使你在无需修改组件结构的情况下复用状态逻辑。**
2.复杂组件变得难以理解
- 每个生命周期常常包含一些不相关的逻辑。例如：组件常常在**componentDidMount**和**componentDidUpdate**中获取数据，但是同一个**componentDidMount**中可能包含很多其他逻辑，如设置事件监听，而之后需要在**componentWillUnmount**中清除。相互关联且需要且需要对照修改的代码被进行了拆分，而完全不相关的的代码却在同一个方法中组合在一起。这样很容易产生bug而且导致逻辑不一致。
1. 为了解决这个问题，Hooks将组件中相互关联的部分拆分成更小的函数，而并非强制按照声明周期划分
3.难以理解的class（没有计划从react中移除class）
- 学习react，class是一大屏障，你必须去理解JavaScript中this的工作方式.class也给一些工具带来问题，class不能很好的压缩，会使热重载出现不稳定的情况
1. 为了解决这些问题，Hooks让使你在非class的情况下可以使用更多的React特性。react组件一直更像是函数，而Hooks则拥抱了函数，同时也没有牺牲react的精神原则，hooks提供了问题的解决方案，无需学习复杂的函数式或响应式编程。
**Hook和现有的代码可以同时工作，你可以渐进使用Hooks,不用着急迁移**
#### Hook规则
> Hook本质就是JavaScript函数,使用它时要遵循两条规则。linter插件来强制执行这些规则
##### 只在最顶层使用Hook
**确保总是在你的React函数的最顶层点用它们，遵循这条规则能确保Hook在每一次渲染中都按照同样的顺序被调用。这让React能够在多次useState,useEffect调用之间保持Hook状态的正确**
##### 只在React函数中调用Hook
##### 单个组件多次使用State hook 和Effect Hook,React怎么知道那个state对应那个useState?
> 答案是react靠的是Hook的调用顺序，只要Hook的调用顺序在多次渲染之间保持一致，React就能正确的将内部state和对应的Hook进行关联

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

上海中心

带你体验react Hooks【黑马web前端】

相关阅读