React Hooks

一、无状态组件（函数式组件）

functional component
一个函数就是一个组件，但是这个函数必须：大写字母开头、必须 Return jsx。
这个函数式组件：没有state、没有生命周期、有 props。

增加了一种函数的调用方式：

import React,{Component,useState} from "react";
function Fun(){
    return <h1>两次调用</h1>
}
export default class App extends Component{
    constructor(){
        super();
    }
    render(){
        return (
                <div>
                    {Fun()}
                    <Fun />
                </div>
            );
    }
}

image

二、使用 useState 制作计数器

import React,{Component,useState} from "react";
function Fun(){
    const [state, setState] = useState(10);
    return <div>
        <h1>{state}</h1>
        <button onClick = {()=>{setState(state + 1)}}>按我加一</button>
    </div>
}
export default class App extends Component{
    constructor(){
        super();
    }
    render(){
        return (
                <div>
                    <Fun />
                </div>
            );
    }
}

useState 是 react 自带的一个 hook 函数，它的作用就是用来声明状态变量。useState 这个函数接收的参数是我们的状态初始值，它返回了一个数组，这个数组的第 [0] 项是当前当前的状态值，第 [1] 项是可以改变状态值的方法函数。

image

三、useEffect 的作用

useEffect 相当于 react 的这三个生命周期（ componentDidMount，componentDidUpdate和componentWillUnmount）函数的结合：

import React,{Component,useState,useEffect} from "react";
function Fun(){
    const [state, setState] = useState(10);
    useEffect(() => {
        console.log("观察我的生命周期！");
        console.log("componentDidMount，componentDidUpdate和componentWillUnmount");
    })
    return <div>
        <h1>{state}</h1>
        <button onClick = {()=>{setState(state + 1)}}>按我加一</button>
    </div>
}
export default class App extends Component{
    constructor(){
        super();
    }
    render(){
        return (
                <div>
                    <Fun />
                </div>
            );
    }
}

image

四、调色板

import React,{Component,useState,useEffect} from "react";
function Fun(){
    const [r, setR] = useState(10);
    const [g, setG] = useState(10);
    const [b, setB] = useState(10);
    return <div>
        <div style = {{
        "width":"200px",
        "height":"200px",
        "backgroundColor":`rgb(${r},${g},${b})`
    }}></div>
        <p>
            R:{r}<input type = "range" min = {"0"} max = {"255"} value={r} onChange = {(e)=>{
                setR(e.target.value);
            }}/>
        </p>
        <p>
            G:{g}<input type = "range" min = {"0"} max = {"255"} value={g} onChange = {(e)=>{
                setG(e.target.value);
            }}/>
        </p>
        <p>
            B:{b}<input type = "range" min = {"0"} max = {"255"} value={b} onChange = {(e)=>{
                setB(e.target.value);
            }}/>
        </p>
    </div>
}
export default class App extends Component{
    constructor(){
        super();
        this.state = {
            a : 10
        }
    }
    render(){
        return (
                <div>
                    <Fun />
                </div>
            );
    }
}

image

现在应用还在测试阶段，但 React 官方说了一句话，Hooks 将成为 React 官方推荐的写法！

作者：学贤社
链接：https://www.jianshu.com/p/c00bc91cf66c
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。