React hooks学习笔记(1)——useState

    函数式组件是当前React主流写法，最近在项目里一直遇到，今天结合B站的教程记录一下自己的学习体会。

  1.  直接就demo来讲吧，首先初始化react项目(好像得用yarn初始化了) 

create-react-app react-hooks-action

  完事之后在package.json里看下react版本，确保大于16.8

2.  把一些不重要的文件删掉，src下创建一个components目录并在此目录下创建两个文件，一个用于展示传统的类组件ClassComp.js， 另一个用于展示函数组件FuncComp.js。

项目结构如图:

3. ClassComp.js:

import React, { Component } from 'react';

export default class ClassComp extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    render() {
        const { count } = this.state;
        const type = this.props.ctype;
        return (<div>
            <span>
                Hello {type}.
                count = {count}
            </span>
            &nbsp; &nbsp;
            <button onClick={() => this.setState({ count: count + 1 })}>add count</button>
        </div>

        );
    }
}

 FuncComp.js:

import React, { useState } from 'react';

export default function FuncComp(props) {
    const [count, setCount] = useState(0);
    return (
        <div>
            <span>
                Hello, {props.ctype}.
                count = {count}
            </span>
            &nbsp; &nbsp;
            <button onClick={() => setCount(count + 1)}>add count</button>
        </div>
    );
}

当然也可以这样写:

import React, { useState } from 'react';

const FuncComp = (props) => {
    const [count, setCount] = useState(0);
    return (
        <div>
            <span>
                Hello, {props.ctype}.
                count = {count}
            </span>
            &nbsp; &nbsp;
            <button onClick={() => setCount(count + 1)}>add count</button>
        </div>
    );
}

export default FuncComp;

App.js:

import ClassComp from "./components/ClassComp";
import FuncComp from "./components/FuncComp";

function App() {
  return (
    <div>
       <ClassComp ctype={"ClassComp"}/>
       <hr />
       <FuncComp ctype={"FuncComp"} />
    </div>
  );
}

export default App;

4.运行 yarn start 跑起来:

程序本身很简单，就是增加count这个state的值，然后就是从props传数据过来。

useState这个hook，用法就是定义一个state，const [state, setState] = useState(initalValue), 第一个参数是状态变量名，第二个是改变状态的set方法，第三个是初始化值。原理目前只知道是个闭包写法，以后研究好了再补充吧。

5.个人总结:

     可以明显看到函数式组件比起类组件代码简洁不少。试想如果一个组件里有很多state，那么this.state = {}这个对象里就定义了很多，都挤在一起了，另外修改状态时都来一遍this.setState({xxx: newxxx})就很臃肿。传递给子组件时也不好传，都要this.一遍。

demo源码