【React】react学习笔记14-Hooks

目的：

时隔数个月，为了跟随技术脚步，学习下React新特性，防止看别人代码懵逼。顺便完善下React快速学习专栏，略作笔记如下。

官网地址：

https://react.html.cn/docs/hooks-overview.html

什么是Hooks

Hooks是React v16.7.0-alpha 版本之后更新的一种 用于函数式编程的解决方案，可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。

Demo环境：

zxdeMacBook-Pro:~ zx$ node -v
v12.16.3
zxdeMacBook-Pro:~ zx$ npm -v
6.14.4

实际Demo笔记以及注解代码，当前是在脚手架项目运行的：

import logo from './logo.svg';
import { useState,useEffect } from 'react';
import './App.css';

/**
 * hooks学习笔记
 * hooks官网地址：https://react.html.cn/docs/hooks-overview.html
 * hooks主要面向业务编程，传统的Class类指定了各个加载时机的节点函数，只要对应时机填代码就可以，代码比较清晰。
 * hooks对底层任务调度做了很多优化，类似于动画渲染等消耗资源的动作，优化提升比较明显。
 *
 * 常用的两个方法 "useState,useEffect " 基本能够满足大部分业务需求，简单整理，略作笔记。
 */

/**
 * 入口方法
 * @returns {*}
 * @constructor
 */
function App() {
    // useState方法，参数为定义变量初始值。返回一个数组对象A（解构）。A[0]就是定义变量的值，A[1]是一个函数，事例见-DEMO-1，DEMO-2
    const [count, setCount] = useState(1);
    const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
    // 类似于 componentDidMount and componentDidUpdate，每次state或者props发生变更，都会重新触发加载。可以点击事件后查看打印。
    useEffect(() => {
        // Update the document title using the browser API
        console.log("Effect")
    });
    useEffect(() => {
        // Update the document title using the browser API
        console.log("Effect2")
        //这里一般进行一些资源的释放操作，如绑定函数的释放，一般很少用到return操作
        return () =>{
            console.log("Effect2 资源释放")
        }

    });

  return (
      <div>
          <p>DEMO-1：You clicked {count} times</p>
              <button onClick={() => setCount(count + 1)}>
                  Click me count add 1
              </button>
          <p>DEMO-2： {todos[0].text} </p>
              <button onClick={() => setTodos([{ text: 'Learn 2' }])}>
                  Click me update text todos value
              </button>


      </div>
  );
}

export default App;

顺便说下脚手架的搭建：

1、确认node版本

2、下载脚手架工具：

npm install -g create-react-app

3、创建新项目：

create-react-app greathooks

4、启动项目

cd greathooks
npm start

5、项目结构如下，替换上面的代码到App.js,浏览器进入 http://localhost:3000/ 测试Demo：