函数组件和自定义hooks

函数式组件初识：先来看一下最简单的一个函数组件。

const User1 = () => {
    return (<div>user1...</div>);
}
const User = () => (<div>user...</div>);

函数式组件属性访问：

const User = (props) => {
    return (<div>{props.name}</div>);
}
class App extends Component{
    render() {
        return (<div>
                <User name={'Hello'}/>
            </div>);
    }
}

函数式组件状态访问：

let [count, setCount] = useState(0);
let [time, setTime] = useState(100);

useState的参数是data的初始值，返回一个数组，数组第一项是data的值，第二项是一个函数，用作设置data的值。
如果有多个数据状态的话，需要多次定义。

import React, { Component, useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
const User = (props) => {
    let [count, setCount] = useState(0);
    let [time, setTime] = useState(100);
    return (<div>
        <div>
            <span>{count}</span>
            <button onClick={() => setCount(++count)}>+</button>
        </div>
        <div>
            <span>{time}</span>
            <button onClick={() => setTime(--time)}>-</button>
        </div>
    </div>);
}
class App extends Component{
    render() {
        return (<div>
                <User/>
            </div>);
    }
}

函数式组件声明周期hook函数：
函数式组件将didAmout和didUpdate合在了一起； useEffect 函数第一个参数是一个函数，第二个参数是一个数组。

useEffect(() => {
     console.log('Hello...');
});

上面的代码每当有状态数据更新时，都会执行，而且第一次渲染的时候也会输出Hello，是因为函数式组件将DidMount和DidUpdate合在了一起。

如果只想触发DidMount，不触发DidUpdate，则设置第二个参数为一个空数组。

useEffect(() => {
     console.log('Hello...');
}, []);

shouldComponentUpdate： 如果只想让time改变的时候才会输出Hello，设置第二个参数如下。

useEffect(() => {
     console.log('Hello...');
}, [time]);

函数式组件中WillUnMount的实现：

return一个函数。

useEffect(() => {
        console.log('Hello...');
        return () => {
            console.log('status clear...');
        };
    }, []);

综合示例：

import React, { Component, useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
const Action = (props) => {
    let [value, setValue] = useState('');
    let {onAdd} = props;
    return (<div>
        <input value={value} onChange={(e) => setValue(e.target.value)}/>
        <button onClick={(e) => {
            if (value !== '') {
              onAdd(value);
            }
        }}>Add</button>
    </div>);
}
const TaskList = (props) => {
    let {data, onDel} = props;
    return (<div>{data.map((item, index) => {
        return <div key={index}><span >{index}. {item.name}</span> 
            <button onClick={(e) => onDel(index)}>Delete</button></div>;
    })}</div>);
}
class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            data: [
                {
                    name: 'david'
                }
            ]
        };
    }
    render() {
        return (<div>
                <Action onAdd={(v) => {
                    let data = this.state.data;
                    data.push({
                        name: v
                    });
                    this.setState({
                        data
                    });
                }}/>
                <TaskList data={this.state.data} onDel={(i) => {
                    let data = this.state.data;
                    data.splice(i, 1);
                    this.setState({
                        data
                    });
                }}/>
            </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

自定义Hook：可以将公共的功能抽象出来。
自定义hook必须以use开头。

import React, { Component, useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
const useTitleHook = (title) => {
    useEffect(() => {
        document.title = title;
        return ()=>{
            document.title = 'APX';
        };
    });
}
const App = () => {
    let [title, setTitle] = useState('APX');
    useTitleHook(title);
    return (<div>
        <input value={title} onChange={e => setTitle(e.target.value)}/>
    </div>);
}
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();