React入门（三）

React Hooks

React提供很多钩子函数，可以让函数式组件拥有状态和常用的生命周期函数以及ref/context等

• useState(initialValue) => [当前最新的状态值，修改状态的方法]
• useEffect() =>集合了DidMount和DidUpdate，通过改变第二个依赖参数选择单独执行哪一个

// 运用useState实现点击累加效果
export default function Test1(props) {
    let [state, setState] = useState(() => {
        // 懒初始化
        return {
            n: 0,
            m: 0
        }
    });
    // 使用生命周期
    useEffect(() => {
        console.log('All')
    })
    useEffect(() => {
        console.log('DidMount')
    }, [])
    useEffect(() => {
        console.log('DidUpdate')
    },[state.n])
    return <div>
        {state.n} === {state.m}
        <button onClick={ev => {
            setState({
                ...state,
                n: state.n + 1
            });
        }}>N+</button>
        <button onClick={ev => {
            setState({
                ...state,
                m: state.m + 1
            });
        }}>M+</button>
    </div>
}

初始化后
点击N+按钮后
点击M+按钮后

• useRef() => 获取DOM元素

// 运用useRef()实现输入框自动聚焦
export default function Test1(props) {
    let [state, setState] = useState(() => {
        return {
            n: 0,
            m: 0
        }
    });
    let inputBox = useRef();
    useEffect(() => {
        inputBox.current.focus();
    }, [])
    return <div>
        <input type="text" ref={inputBox} />
    </div>
}

• useReducer() => 类似于redux的管理机制

// 运用useReducer()完成点击累加效果
function reducer(state, action) {
    state = { ...state };
    switch (action.type) {
        case 'ADDN':
            state.n++;
            break;
        case 'ADDM':
            state.m++;
            break;
    }
    return state;
}
export default function Test1(props) {
    let [state, dispatch] = useReducer(reducer, {
        n: 0,
        m: 0
    });

    return <div>
        {state.n} === {state.m}
        <button onClick={ev => {
            dispatch({
                type: 'ADDN'
            })
        }}>N+</button>
        <button onClick={ev => {
            dispatch({
                type: 'ADDM'
            })
        }}>M+</button>
    </div>
}