自定義Hook

作用：提取封裝一些公共的處理邏輯
玩法：創建一個函數，名字需要是 useXxx ，后期就可以在組件中調用這個方法！

自定義Hook 1

頁面加載的時候修改瀏覽器標簽的名字。

const useDidMount = function useDidMount(title) {if (!title) title = 'React';// 基于React內置的Hook函數，實現需求即可useEffect(() => {document.title = title;}, []);
};

自定義Hook 2

由于useState 返回的 set修改狀態方法只能“修改單一的數據”，可能會對其他數據造成影響，所以我們這里自定義一個Hook，在修改單一數據的同時，不對其他數據造成影響。

useA 是一個自定義 Hook，它的功能是管理一個對象類型的狀態，并提供一個更新該狀態的函數 setA。參數：

• val：這是 useA 接受的初始值，通常是一個對象，代表狀態的初始值。

• useState(val)：它初始化狀態 a，并返回一個數組，數組的第一個元素是當前的狀態，第二個元素是更新該狀態的函數（seta）。

• setA(partialState)：這個函數用來更新狀態。它 接收一個部分狀態（partialState），然后將其與當前狀態合并 。這里使用了 ES6 的 … 擴展運算符，將當前狀態 a 和部分更新的狀態合并起來，確保只更新其中的某些字段，而不影響其他字段。

• 返回值：返回一個數組：第一個元素是當前的狀態 a，第二個元素是更新該狀態的函數 setA。

const useA = function (val) {const [a, seta] = useState(val);const setA = function setA(partialState) {seta({...a,...partialState})}return [a, setA]
}

使用

const Demo = function Demo() {let [state, setA] = useA({supNum: 10,oppNum: 5});const handle = (type) => {if (type === 'sup') {setA({supNum: state.supNum + 1});return;}setA({oppNum: state.oppNum + 1});};useDidMount('哈哈哈哈哈');return <div className="vote-box"><div className="main"><p>支持人數：{state.supNum}人</p><p>反對人數：{state.oppNum}人</p></div><div className="footer"><Button type="primary" onClick={handle.bind(null, 'sup')}>支持</Button><Button type="primary" danger onClick={handle.bind(null, 'opp')}>反對</Button></div></div>;
};

注意事項

下面寫法就會報錯，因為命名使用use開頭，React會進行檢驗Hook函數的規則。

const Demo = function Demo() {if(1==1){useDidMount('哈哈哈哈哈');}
}

如果不使用use開頭，就不會報錯，但是我們一般封裝自定義Hook，要遵守Hook函數的規則

const Demo = function Demo() {AAA ('哈哈哈哈哈');}