什么是hooks

什么是hooks

hooks让你在不使用class的时候使用react的特性。

类组件的不足

状态逻辑复用难

• 缺少复用机制：需要使用渲染属性和高阶组件去解决
• 渲染属性和高阶组件导致层级冗余：代码会变得越来越难以理解

趋向复杂，难以维护

• 生命周期函数混杂不相关逻辑
• 相关逻辑分散在不同生命周期

this指向困扰

• 内联函数过度创建新句柄
• 类成员函数不能保证this

Hooks优势

优化类组件的三大问题

• 函数组件无this问题
• 自定义Hooks方便复用复用状态逻辑
• 副作用的关注点分离

state Hook

在函数组件中使用它是为了增加一些状态。react在re-render的时候会保留它。它返回一个数组，一个是初始值，一个是可以更新它的方法。类似于class中的this.setState()。不是把旧值和新值合并。

useState的参数是初始值。

const [todos,setTodos] = useState([]);

effect Hook

effect hooks让你可以在函数组件中可以写副作用。可以把它看成是componentDidMount，componentDidUpdate，componentWillUnmount的结合。

useEffect(() => {
        const todos = JSON.parse(localStorage.getItem(LS_KEY))
        dispatch({type:INIT,todos})
    },[])
    useEffect(() => {
        localStorage.setItem(LS_KEY,JSON.stringify(ui.todos))
    }, [ui.todos])

清楚effect：组件卸载时需要清除 effect 创建的一些资源

useEffect(() => {
        window.addEventListener('pageshow', function() {});
        return () => {
        	window.removeEventListener('pageshow', function() {});
        }
    },[])