P01: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 的写法。

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » P01:React Hooks介绍及环境搭建

发表回复