|
React Hook是什么？
React官网是这么介绍的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 完全可选的 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。 100% 向后兼容的 Hook 不包含任何破坏性改动。 现在可用 Hook 已发布于 v16.8.0。 没有计划从 React 中移除 class 你可以在本页底部的章节读到更多关于 Hook 的渐进策略。 Hook 不会影响你对 React 概念的理解 恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。 如果对react还不够了解建议先看下react官方文档，写写demo再来看文章，因为有的react基础的东西我就一笔带过不细说。
react 官方文档 https://zh-hans.reactjs.org/docs/hooks-state.html
React目前提供的Hook
| hook | 用途 | | useState | 设置和改变state，代替原来的state和setState | | useEffect | 代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版 | | useLayoutEffect | 与 useEffect 作用相同，但它会同步调用 effect | | useMemo | 控制组件更新条件，可根据状态变化控制方法执行,优化传值 | | useCallback | useMemo优化传值，usecallback优化传的方法，是否更新 | | useRef | 跟以前的ref，一样，只是更简洁了 | | useContext | 上下文爷孙及更深组件传值 | | useReducer | 代替原来redux里的reducer,配合useContext一起使用 | | useDebugValue | 在 React 开发者工具中显示自定义 hook 的标签，调试使用。 | | useImperativeHandle | 可以让你在使用 ref 时自定义暴露给父组件的实例值。 |
1.useState
import React from 'react';import './App.css';//通常的class写法,改变状态class App extends React.Component { constructor(props){ super(props) this.state = { hook:'react hook 是真的好用啊' } } changehook = () => { this.setState({ hook:'我改变了react hook 的值' }) } render () { const { hook } = this.state return( <header className="App-header"> {hook} <button onClick={this.changehook}> 改变hook </button> </header> ) }}export {App}//函数式写法,改变状态function App() {//创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊' const [hook, sethook] = useState("react hook 是真的好用啊"); return ( <header className="App-header"> {hook}{/**这里的变量和方法也是可以直接使用的 */} <button onClick={() => sethook("我改变了react hook 的值")}> 改变hook </button> </header> );}export {App}//箭头函数的函数写法,改变状态export const App = props => { const [hook, sethook] = useState("react hook 是真的好用啊"); return ( <header className="App-header"> {hook} <button onClick={() => sethook("我改变了react hook 的值")}> 改变hook </button> </header> );};使用方法备注在上面的demo中
看完上面useState的对比使用，一个小的demo结构更清晰，代码更简洁，更像写js代码，运用到项目中，那岂不是美滋滋。
2.useEffect & useLayoutEffect
useEffect代替原来的生命周期，componentDidMount，componentDidUpdate 和 componentWillUnmount 的合并版
useEffect( ()=>{ return ()=>{ } } , [ ]) - 第一个参数，是函数，默认第一次渲染和更新时都会触发，默认自带一个return ，return一个函数表示可以再销毁之前可以处理些事情
- 第二个参数，数组【】，空的时候表示只执行一次，更新时不触发，里面的参数是什么，当参数变化时才会执行useEffect
- useEffect可以多次使用，按照先后顺序执行
- useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数
import React, { useState, useEffect, useLayoutEffect } from 'react';//箭头函数的写法，改变状态const UseEffect = (props) => { //创建了一个叫hook的变量，sethook方法可以改变这个变量,初始值为‘react hook 是真的好用啊' const [ hook, sethook ] = useState('react hook 是真的好用啊'); const [ name ] = useState('baby张'); return ( <header className="UseEffect-header"> <h3>UseEffect</h3> <Child hook={hook} name={name} /> {/**上面的变量和下面方法也是可以直接使用的 */} <button onClick={() => sethook('我改变了react hook 的值' + new Date().getTime())}>改变hook</button> </header> );};const Child = (props) => { const [ newhook, setnewhook ] = useState(props.hook); //这样写可以代替以前的componentDidMount，第二个参数为空数组，表示该useEffect只执行一次 useEffect(() => { console.log('first componentDidMount'); }, []); //第二个参数，数组里是hook,当hook变化时，useEffect会触发，当hook变化时，先销毁再执行第一个函数。 useEffect( () => { setnewhook(props.hook + '222222222'); console.log('useEffect'); return () => { console.log('componentWillUnmount '); }; }, [ props.hook ] ); //useLayoutEffect 强制useeffect的执行为同步，并且先执行useLayoutEffect内部的函数 useLayoutEffect( () => { console.log('useLayoutEffect'); return () => { console.log('useLayoutEffect componentWillUnmount'); }; }, [ props.hook ] ); return ( <div> <p>{props.name}</p> {newhook} </div> );};export default UseEffect;
3.useMemo & useCallback
他们都可以用来优化子组件的渲染问题，或者监听子组件状态变化来处理事件，这一点在以前是很难做到的，因为shouldComponentUpdate 里能监听到是否变化，但没法控制其他的外部方法，只能返回true和false,而componentDidUpdate只能在更新后执行，所以想在渲染之前做些事情就不好搞了。
useCallback目前还不能用 import React, { useState, useMemo } from 'react';const Child = ({ age, name, children }) => { //在不用useMemo做处理的时候，只要父组件状态改变了，子组件都会渲染一次，用了useMemo可以监听某个状态name，当name变化时候执行useMemo里第一个函数 console.log(age, name, children, '11111111'); function namechange() { console.log(age, name, children, '22222222'); return name + 'change'; } {/** react 官网虽说useCallback与useMemo的功能差不多，但不知道版本问题还怎么回是，这个方法目前还不能用 const memoizedCallback = useCallback( () => { console.log('useCallback') }, [name], ); console.log(memoizedCallback,'memoizedCallback') */} //useMemo有两个参数，和useEffect一样，第一个参数是函数，第二个参数是个数组，用来监听某个状态不变化 const changedname = useMemo(() => namechange(), [ name ]); return ( <div style={{ border: '1px solid' }}> <p>children：{children}</p> <p>name：{name}</p> <p>changed：{changedname}</p> <p>age：{age}</p> </div> );};const UseMemo = () => { //useState 设置名字和年龄，并用2两个按钮改变他们，传给Child组件 const [ name, setname ] = useState('baby张'); const [ age, setage ] = useState(18); return ( <div> <button onClick={() => { setname('baby张' + new Date().getTime()); }} > 改名字 </button> <button onClick={() => { setage('年龄' + new Date().getTime()); }} > 改年龄 </button> <p> UseMemo {name}：{age} </p> <Child age={age} name={name}> {name}的children </Child> </div> );};export default UseMemo;
4.useRef
ref跟之前差不多，useRef创建
下载地址:
js代码实现多人聊天室
原生JS实现滑动按钮效果 |
