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>
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容