P01:React Hooks介绍及环境搭建
Posted wgchen~
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了P01:React Hooks介绍及环境搭建相关的知识,希望对你有一定的参考价值。
React Hooks 简介
2018年底FaceBook的React小组推出Hooks以来,所有的React的开发者都对它大为赞赏。
React Hooks就是用函数的形式代替原来的继承类的形式,并且使用预函数的形式管理state,有Hooks可以不再使用类的形式定义组件了。
这时候你的认知也要发生变化了,原来把组件分为有状态组件和无状态组件,有状态组件用类的形式声明,无状态组件用函数的形式声明。
那现在所有的组件都可以用函数来声明了。
2019年React Hooks是React生态圈里边最火的新特性了。
它改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松,它改变了一个状态组件的复用性,让组件的复用性大大增加。
我们这里先不说Hooks有什么好处,先学习,学过几节内容后,我们再来总结React Hooks的好处。
使用 create-react-app 创建项目
D
盘新建一个 ReactHooksDemo
的文件夹,然后在文件夹中用 create-react-app
创建一个demo01
的项目。
D: // 进入D盘
mkdir ReactHooksDemo
cd ReactHooksDemo
create-react-app demo01
只留 /src/index.js
文件,然后把里边的代码删减成下面的样子:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
React Hooks 编写形式对比
这样就算开发环境搭建完成了,接下来我们对比一下原始的写法和现在有了React Hooks 的写法。
先来写一个最简单的有状态组件,点我们点击按钮时,点击数量不断增加。
原始写法
import React, Component from 'react';
class Example extends Component
constructor(props)
super(props);
this.state = count:0
render()
return (
<div>
<p>You clicked this.state.count times</p>
<button onClick=this.addCount.bind(this)>Chlick me</button>
</div>
);
addCount()
this.setState(count:this.state.count+1)
export default Example;
React Hooks 写法
import React, useState from 'react';
function Example()
const [ count , setCount ] = useState(0);
return (
<div>
<p>You clicked count times</p>
<button onClick=()=>setCount(count+1)>click me</button>
</div>
)
export default Example;
从这两个程序的对比上可以看出Hooks本质上就是一类特殊的函数,他们可以为你的函数型组件(function component)注入一些特殊的功能。
这听起来有点像以前React中的Mixins差不多哦。其实是由很多不同,hooks的目的就是让你不再写class,让function一统江湖。
以上是关于P01:React Hooks介绍及环境搭建的主要内容,如果未能解决你的问题,请参考以下文章
React拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结(代码片
React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」
React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」
基于 Webpack 4 和 React hooks 搭建项目