React hooks詳解

此篇文章僅是對hooks入門的總結，老鳥略過吧~

React從16.8.X以后增加了一個新特性，react hooks 讓我們看看這個新特性又帶來了哪些驚喜呢~以下內容我們采取不同方式創建組件來進行對比總結

組件的創建方式：

用過react的都了解，傳統react創建組件提供了兩種方式，函數式與類（class）

class創建無狀態組件

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
      <p>{this.props.name}</p>
    </div>
  }
}

function renderApp() {
  let appProps = {
    name: 'dqhan'
  }
  ReactDOM.render(
    <App  {...appProps} />,
    document.getElementById('app')
  )
}

renderApp();

添加狀態管理

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.name
    };
    this.handleChangeName = this.handleChangeName.bind(this);
  }

  handleChangeName() {
    this.setState({
      name: '我變了'
    })
  }

  render() {
    return (
      <React.Fragment>
        <p> {`hello~${this.state.name}`} </p>
        <button onClick={this.handleChangeName}></button>
      </React.Fragment>
    );
  }
}

我們通過class可以實現無狀態組件以及常規組件通過setState的狀態管理。

函數式創建組件

function App(props) {
  return <p>{`hello! ${props.name}`}</p>
}

function renderApp() {
  let appProps = { name: "dqhan" };
  ReactDOM.render(<App {...appProps} />, document.getElementById("app"));
}

函數式創建組件通常是無狀態組件，這種方式沒有辦法在內部對狀態統一管理，如果我們非要添加狀態管理呢，那就只能借助redux啦~或者我們自己利用觀察者模式實現一個發布訂閱（emmmm比較勉強吧，畢竟實際開發中我們不可能這么做）

那么如果我們非要這么做呢，正題來了，React版本在16.8.X以后增添了一個新特性就是hooks。

hooks涉及API有useState、 useEffect、 useCallback、 useRef、 useMemo、 React.memo、 useReducer等，具體可以參考官方文檔，我們來看一下hooks怎么用

React Hooks創建組件

無狀態組件

function App(props) {
  return <div>
    <p>{`hello~${props.name}`}</p>
  </div>
}

哈哈，跟函數式一樣，畢竟我們要在函數式組件里添加狀態管理嘛

1.useState

作用：添加狀態管理

function App() {
  let [name, setName] = useState('dqhan');
  return <div>
    <p>{`hello~${name}`}</p>
    <button onClick={() => setName('我變了')}>Click</button>
  </div>;
}

react hook可以管理自己的狀態，有自己的函數鈎子，這點相比要函數式顯然效果更好，不需要借助redux，這就是我們為啥要在前面提到函數式編程涉及狀態管理問題，就是要在這里跟react hook做個比較。

到這里我們知道了這個useState，多了一個useState讓函數式創建類有了自己的持久狀態。那么在函數式里面我們如何做到class組件中的setState呢？

function App(props) {
  let [name, setName] = useState('dqhan');
  let handleChangeName = useCallback(() => {
    setName(preState => {
      let updatedValues = {
        newValue: '我變了'
      }
      return { ...{ preState }, ...updatedValues }
    })
  })
  function click1(params) {
    setName('我變了1')
  }
  return <div>
    <p>{`hello~${name}`}</p>
    <button onClick={handleChangeName}>Click1</button>
    <button onClick={click1}>Click2</button>
  </div>;
}

這中方式已經實現了狀態整合，但是我們如果模擬一個state呢，來統一管理state呢，我們可以這么實現

function App(props) {
  let [state, setState] = useState({
    name: 'dqhan'
  });
  let handleChangeName = useCallback(() => {
    setState(preState => {
      let updatedValues = {
        name: '我變了'
      }
      return { ...preState, ...updatedValues }
    })
  })
  return <div>
    <p>{`hello~${state.name}`}</p>
    <button onClick={handleChangeName}>Click</button>
  </div>;
}

到目前為止，已經知道了react hook中如何使用state，那么周期函數呢，那么就涉及另一個鈎子useEffect

2.useEffect

作用：周期函數

useEffect涉及三個周期函數 componentDidMount 、componentDidUpdate、 compinentWillUmount 我們看一個簡單的實例

function App() {
  var [count, setCount] = useState(0);
  useEffect(() => {
    console.log(`update--${count}`);
  }, [count]);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click</button>
    </div>
  );
}

下面我們來了解一下react hooks的周期函數，他是如何工作的

function App() {
  let [count, setCount] = useState(0);
  useEffect(
    () => {
      //默認每一次渲染都需要執行的方法
      console.log('didmount')
      //如果需要實現componentWillComponent,則return 一個函數即可    
      return function unmount() {
        console.log('unmount')
      }
    }
  )

  let handleSetCount = useCallback(() => {
    setCount((preCount) => {
      let updatedCount = preCount + 1;
      return updatedCount;
    });
  })

  return <React.Fragment>
    {console.log('render')}
    <p>{`${count}`}</p>
    <button onClick={handleSetCount}>Click</button>
  </React.Fragment>
}

我們可以看一下執行周期

第一次渲染時候執行 render  didmount

點擊事件執行順序 render unmount didmount

不難看出，每一次渲染我們都會執行render進行渲染，然后清除掉上一次的useEffect，然后渲染完成之后重新執行useEffect

這樣通過一個useEffec可以默認執行兩個周期函數，也就是當我們需要對組件添加一些需要當組件卸載時候清除掉的功能時候，這個是很方便的，常見的就是setTimeout setIntrval等定時器

但是比如一個component渲染之后我們通常會發送一個請求來請求數據，然后重寫渲染這個組件，這樣會造成死循環怎么辦，我們可以在useEffect后添加第二個參數

阻止useEffect每一次都要執行

function App() {
  let [count, setCount] = useState(0);
  useEffect(
    () => {
      //默認每一次渲染都需要執行的方法
      console.log('didmount')
      //如果需要實現componentWillComponent,則return 一個函數即可    
      return function unmount() {
        console.log('unmount')
      }
    },
    [setCount]
  )

  let handleSetCount = useCallback(() => {
    setCount((preCount) => {
      let updatedCount = preCount + 1;
      return updatedCount;
    });
  })

  return <React.Fragment>
    {console.log('render')}
    <p>{`${count}`}</p>
    <button onClick={handleSetCount}>Click</button>
  </React.Fragment>
}

當傳入第二個參數得值不變得時候就會跳過useEffect函數執行

如何模擬componentDidMount與componentWillUmount,第二個參數我們傳一個空數組，這樣就可以實現僅當組件渲染跟組件卸載得時候執行

function App() {
  let [count, setCount] = useState(0);
  useEffect(
    () => {
      //默認每一次渲染都需要執行的方法
      console.log('didmount')
      //如果需要實現componentWillComponent,則return 一個函數即可    
      return function unmount() {
        console.log('unmount')
      }
    },
    []
  )

  let handleSetCount = useCallback(() => {
    setCount((preCount) => {
      let updatedCount = preCount + 1;
      return updatedCount;
    });
  })

  return <React.Fragment>
    {console.log('render')}
    <p>{`${count}`}</p>
    <button onClick={handleSetCount}>Click</button>
  </React.Fragment>
}

不過，這隱藏了一個問題:傳遞空數組容易出現問題。如果咱們添加了依賴項，那么很容易忘記向其中添加項，如果錯過了一個依賴項，那么該值將在下一次運行useEffect時失效，並且可能會導致一些奇怪的問題。

常見得就是當我們想用父組件調用子組件時候使用得ref,或者我們要獲取dom焦點時

function App() {
  let [count, setCount] = useState(0);
  let [value, setValue] = useState('')
  const inputRef = useRef();

  useEffect(
    () => {
      //默認每一次渲染都需要執行的方法
      console.log('didmount')

      //如果需要實現componentWillComponent,則return 一個函數即可    
      return function unmount() {
        console.log('unmount')
      }
    },
    [inputRef]
  )

  let handleSetCount = useCallback(() => {
    setCount((preCount) => {
      let updatedCount = preCount + 1;
      return updatedCount;
    });
  })

  let handleSetValue = function (e) {
    setValue(e.target.value);
  }

  return <React.Fragment>
    {console.log('render')}
    <p>{`${count}`}</p>
    <input
      ref={inputRef}
      value={value}
      onChange={handleSetValue}
    ></input>
    <button
      ref={inputRef}
      onClick={handleSetCount}
    >Click</button>

  </React.Fragment>
}

下面我們實現一個請求實例

請求實例

function App() {
  let [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(config);
      setData(result);
    };

    fetchData();
  }, []);

  return <div></div>;
}

利用hook可以做到分離接口

function useFetchHook(config, watch) {
  let [data, setData] = useState(null);
  let [status, setStatus] = useState(0);
  useEffect(
    () => {
      const fetchData = async () => {
        try {
          const result = await axios(config);
          setData(result);
          setStatus(0);
        } catch (e) {
          setStatus(1);
        }
        fetchData();
      };
    },
    watch ? [...watch] : []
  );

  return { data, status };
}

現在我們整體上知道了useState useEffect怎么使用了，我們來自己實現一個簡易的

實現useState

var val;
function useState(initVal) {
  let resultVal = val || initVal;
  function setVal(newVal) {
    resultVal = newVal;
    render();
  }
  return [resultVal, setVal]
}

實現useEffect

var watchArr = [];
function useEffect(fn, watch) {
  var hasWatchChange = true;
  hasWatchChange = watchArr && watch.every((val, i) => val === watchArr[i])
  if (hasWatchChange) {
    fn();
    watchArr = watch;
  }
}

hooks里面最常用的兩個API就是useState與useEffect，現在是不是已經了解了呢，下面我們介紹一些其他API

3.useContext

作用：越級別獲取組件內容

類組件中我們也常用context，類組件實現方式

　const AppContext = React.createContext('target');

class App extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <AppContext.Provider value="dark">
        <Target />
      </AppContext.Provider>
    );
  }
}

class Target extends React.Component {
  //通過定義靜態屬性 contextType 來訂閱
  //沒有定義是獲取不到的
  static contextType = AppContext;
  render() {
    console.log(this.context);
    return <div></div>;
  }
}

Hooks實現方式

const AppContext = React.createContext('target');

function App() {
  useEffect(
    () => { },
    []
  );
  return <AppContext.Provider value="dark">
    <Target />
  </AppContext.Provider>;
}

function Target() {
  const value = useContext(AppContext);
  console.log(value);
  return <div></div>;
}

在需要訂閱多個 context 的時候，就更能體現出useContext的優勢。

傳統的實現方式

function App() {
  return <CurrentUser.Consumer>
    {
      user => <Notifications.Consumer>
        {notifications =>
          <header>
            Welcome back, {user.name}!
              You have {notifications.length} notifications.
          </header>
        }
      </Notifications.Consumer>
    }
  </CurrentUser.Consumer>
}

hooks實現

function App() {
  const user = useContext(CurrentUser);
  const notifications = useContext(Notifications);

  return (
    <header>
      Welcome back, {user.name}!
      You have {notifications.length} notifications.
    </header>
  );
}

是不是比傳統的要簡單的多

4.useReducer

作用：復雜狀態管理，跟redux本質上是一樣的

函數式組件如果涉及到狀態管理，我們需要借助redux，那么hooks需要嗎，答案也是一樣的，簡單的狀態管理我們可以通過useState來進行管理，如果比較復雜的狀態管理呢，react hook給我們提供了方法 useReducer

function init(initialCount) {
  return { count: initialCount };
}

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return init(action.payload);
    default:
      throw new Error();
  }
}

function Counter({ initialCount }) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({ type: 'reset', payload: initialCount })}>
        Reset
      </button>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

5.useCallback

作用：提升性能，緩存事件，減少沒必要的渲染

當我們使用類組件創建時，我們會怎么綁定事件呢

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <div>
      <p>{`hello~${name}`}</p>
      <button onClick={() => { console.log('click') }}>Click</button>
    </div>
  }
}

這樣寫會導致什么結果呢，就是當渲染的時候react會認為每一次綁定的事件都是新的，從而從新進行計算

改進如下

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('click')
  }
  render() {
    return <div>
      <p>{`hello~${name}`}</p>
      <button onClick={this.handleClick}>Click</button>
    </div>
  }
}

我們講觸發函數綁定在this上，來緩存這個方法

hooks

function App() {
  let [count, setCount] = useState(0);
  return <div>
    <button onClick={() => setCount(1)} ></button>
  </div>
}

同樣的問題這么寫也是存在的，改進如下

function App() {
  let [count, setCount] = useState(0);
  let handleSetCount = useCallback(() => {
    setCount(1);
  })
  return <div>
    <button onClick={handleSetCount} ></button>
  </div>
}

我們通過useCallback來緩存這個事件達到優化效果

6.useMemo

作用：提升性能，選擇性的渲染變化組件

function App(target, target2) {
  const target = useMemo(() => {
    return <Target />
  }, [target])
  const target2 = useMemo(() => {
    return <Target2 />
  }, [target2])
  return <div>
    {target}
    {target2}
  </div>
}

當target變化僅渲染Target組件，同理也作用與Target2組件

React.memo

作用：提升性能

如果想實現class中的shouldComponentUpdate方法呢 ，區別是它只能比較 props，不會比較 state：

const App = React.mome((target, target2) => {
  const target = useMemo(() => {
    return <Target />
  }, [target])
  const target2 = useMemo(() => {
    return <Target2 />
  }, [target2])
  return <div>
    {target}
    {target2}
  </div>
})

7.useRef

作用：獲取dom依賴關系

類組件實現方式

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return <input ref={this.myRef} type="text" />;
  }
}

hooks

function App() {
  let [value, setValue] = useState('')
  const inputRef = useRef();

  useEffect(
    () => {
    },
    [inputRef]
  )

  let handleSetValue = function (e) {
    setValue(e.target.value);
  }

  return <React.Fragment>
    <input
      ref={inputRef}
      value={value}
      onChange={handleSetValue}
    ></input>

  </React.Fragment>
}

好了hooks的基本使用方式就介紹完了，現在你對hook多少能了解了一些吧~

代碼地址：https://github.com/Dqhan/React