REACT HOOKS

hooks为何而生

react提倡函数式编程，用组件的形式构建页面。达到代码的高复用性和可维护性。但是react遇到的问题：

组件复用涉及到状态
逻辑散落在各种生命周期中，难以理解
JSX多层嵌套、高阶组件成本

hooks生为何物

hooks译为挂钩，钩住。让你通过这个钩子可以钩住react提供的功能，方便使用。就是使用Function Component的时候可以用state和其他的react特性。

hooks官方文档

传送门

源码解析

git地址

hook注意事项

不能再class component中使用
不能再循环或者判断语句里调用，不能在子函数中调用。

自定义hook

用use开头的一个获取屏幕宽高的hook useWindowsWH

项目重构（box-admin）

1. package包升级

react自16.8版本开始支持react hook，所以要升级项目中相关hook的package版本（react、react-dom版本）

2. class component 改为 function component 写法

没有this的概念了。所以，相关this的部分要进行处理

3. 已有能力的更改

在函数入参写入props，因为函数组件不存在this.props，可以实现props.location.push等功能

函数组件 && hook

hook

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from 'axios';

function SearchResults() {
  const [data, setData] = useState({ hits: [] });
  const [id, setId] = useState();

  useEffect(() => {
    let ignore = false;

    async function fetchData() {
      const result = await axios('http://xxx.xxx.com/api/authority/searchRoleList?roleId=' + id);
      if (!ignore) setData(result.data);
    }

    fetchData();
    return () => { ignore = true; }
  }, [query]);

  return (
    <>
      <input value={query} onChange={e => setId(e.target.value)} />
      <ul>
        {data.hits.map(item => (
          <li key={item.id}>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<SearchResults />, rootElement);

函数组件

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Parent() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    console.log(count)
  },[count])
  return (
    <div>
      {Child1(count)}
      {Child2(count, setCount)}
    </div>
  )
}

function Child1(val) {
  return (
    <div>{val}</div>
  )
}

function Child2(val, set) {
  function add() {
    set(val+1)
  }
  return (
    <div>
      <div onClick={add}>click</div>
    </div>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

获取屏幕宽高的hook（自己写的简版）

import React, { useState, useEffect } from 'react';

function getSize() {
  return {
    H: window.innerHeight,
    W: window.innerWidth
  }
}
function useWindowSize() {
  const [windowSize, setWindowSize] = useState(getSize());
  function handleResize() {
    console.log('dy');
    setWindowSize(getSize())
  }

  useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    }
  })

  return windowSize;
}

export default useWindowSize;

React新特性

生命周期改变
hooks
更多
hooks好文
hooks请求数据例子

react hook浅谈