React Hooks介绍和环境搭建（一）

React Hooks 简介

2018年底FaceBook的React小组推出Hooks以来，所有的React的开发者都对它大为赞赏。React Hooks就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state，有Hooks可以不再使用类的形式定义组件了。这时候你的认知也要发生变化了，原来把组件分为有状态组件和无状态组件，有状态组件用类的形式声明，无状态组件用函数的形式声明。那现在所有的组件都可以用函数来声明了。

我们这里先不说Hooks有什么好处，就算说了，你也不可能完全理解，好像我王婆卖瓜自卖自夸一样，所以先学习，学过几节课后，我们再来总结React Hooks的好处。

###　使用create-react-app创建项目

create-react-app在视频中已经使用过很多次了，它是React官方的脚手架，所以稳定性和使用率都是目前最好的，你可以大胆的进行使用。

这里我在D盘新建一个ReactHooksDemo的文件夹，然后在文件夹中用create-react-app创建一个demo01的项目。我们这些动作全部在命令提示符（我习惯叫终端）中进行。

D: // 进入D盘

mkdir ReactHooksDemo

cd ReactHooksDemo

create-react-app demo01

这个过程要根据你的网络情况，我公司的时间大概30秒，家里大概15分钟，我也不知道为什么，只能说是网络差异吧。建立好以后，我会把项目进行最小化设置（删除/src下的大部分代码和文件）.

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

转自：https://jspang.com/posts/2019/08/12/react-hooks.html