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 搭建项目

React Hooks 介绍及与传统 class 组件的生命周期函数对比

React Hooks 介绍及与传统 class 组件的生命周期函数对比