P01：React Hooks介绍及环境搭建

灰太狼 2023-10-06 20:59 3阅读 0赞

#### React Hooks ####

*  React Hooks 简介
 *  使用 create-react-app 创建项目
 *  React Hooks 编写形式对比
 *   *  原始写法
     *  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 的写法。

先来写一个最简单的有状态组件，点我们点击按钮时，点击数量不断增加。

![在这里插入图片描述][a8b7b7e131f14d9b97167ea71290b408.gif_pic_center]

### 原始写法 ###

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一统江湖。

[a8b7b7e131f14d9b97167ea71290b408.gif_pic_center]: https://img-blog.csdnimg.cn/a8b7b7e131f14d9b97167ea71290b408.gif#pic_center