React Hooks

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

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

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

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

                    {Fun()}
                    
                
            );
    }
}

image

二、使用 useState 制作计数器

import React,{Component,useState} from "react";
function Fun(){
    const [state, setState] = useState(10);
    return 

        
{state}
        {setState(state + 1)}}>按我加一
    
}
export default class App extends Component{
    constructor(){
        super();
    }
    render(){
        return (
                

                    
                
            );
    }
}

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 

        
{state}
        {setState(state + 1)}}>按我加一
    
}
export default class App extends Component{
    constructor(){
        super();
    }
    render(){
        return (
                

                    
                
            );
    }
}

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 

        

        

            R:{r}{
                setR(e.target.value);
            }}/>
        
        

            G:{g}{
                setG(e.target.value);
            }}/>
        
        

            B:{b}{
                setB(e.target.value);
            }}/>
        
    
}
export default class App extends Component{
    constructor(){
        super();
        this.state = {
            a : 10
        }
    }
    render(){
        return (
                

                    
                
            );
    }
}

image

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

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