React学习计划-react-hooks补充

React Hooks

1. 使用hooks理由

1. 高阶组件为了复用，导致代码层级复杂
2. 生命周期的复杂

2. useState(保存组件状态)

const [state, setstate] = useState(initialState)
1

3. useEffect(处理副作用)和useLayoutEffect(同步执行副作用)

1. 使用方式：

useEffect(() => {
  // effect
  return () => {
    // cleanup
  };
}[依赖的状态；空数组，表示不依赖])
1
2
3
4
5
6

2. 说明：

• 不传入依赖：对比componentDidMount生命周期，表示初始加载完后执行
• 传入依赖：对比componentDidMount和componentDidUpdate生命周期,表示加载完后和更新完成后执行
• 回调函数内return函数,对比componentWillUnmount销毁生命周期

3. 示例：

useEffect(()=>{
  const timer = setInterval(()=>{
    console.log('这是定时器')
  }, 1000)
  return ()=>{
    console.log('componentWillUnmount销毁时触发')
    clearInterval(timer)
  }
},[name])
1
2
3
4
5
6
7
8
9

4. useEffect和useLayoutEffect区别：

简单来说就是调用时机不同，useLayoutEffect和原来componentDidMount & componentDidUpdate一致，在react完成DOM更新后马上同步调用代码，会阻塞页面渲染。useEffect则是在整个页面渲染完才会调用代码

官方优先建议使用useEffect

在实际使用时如果想避免页面抖动（在useEffect里修改DOM很有可能出现）的话，可以把需要操作的DOM的代码放在useLayoutEffect里，在这里做DOM操作，这些DOM修改会和react做出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价

4. useCallBack(记忆函数)

防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才重新声明一次

var handleClick = useCallback(()=>{
  console.log(name)
},[name])

handleClick()}>点击

// 只有name改变后，这个函数才会重新声明一次
// 如果传入空数组，那么就是第一次创建被缓存，如果name后期改变了，拿到的还是老name
// 如果传第二个参数，每次都会重新声明一次，拿到的就是最新的name
1
2
3
4
5
6
7
8
9

5. useMemo(记忆组件)(可以理解为Vue的计算属性)

useCallBack的功能完全可以由useMemo所取代，如果你想通过使用useMemo返回一个记忆函数也是完全可以的。

useCallback(fn, inputs) is equivalent to useMemo(()=> fn, inputs)
1

唯一的区别是：useCallback不会执行第一个参数函数，而是将它返回给你，而useMemo会执行第一个函数并将函数执行结果返回给你。所以在前面的例子中，可以返回handleClick来达到存储函数的目的。
所以useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而useMemo更适合经过函数计算得到一个确定的值，比如记忆组件。

const getFilterList = useMemo(
  ()=> list.filter(item => item.name.toUpperCase().includes(text.toUpperCase())),
  [list, text] // 如果list和text变化
  )
1
2
3
4

6. useRef(保存引用值)

1. 设置ref属性值

const myRef = useRef(null)

1
2

2. 用于缓存一个变量值

const [name, setName] = useState('zhangsan')
var mycount = useRef(0)
{
  setName('lisi')
  mycount.current++
}}>点击
{name}-{mycount}

1
2
3
4
5
6
7
8

7. useReducer和useContext(减少组件层级)

1. useContext用于组件通信，接收父组件传入的值

// 父组件
import React from 'react'
var GlobalContext = React.createContext()

function App(){
  {
    name: '张三',
    age: 20,
    changeAge: (value) => {
      setAge(value)
    }
  }}>
    
  
}

// 子组件内
function Child(){
  const text = useContext(GlobalContext)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. useReducer：实现Redux中reducer的功能，应用在组件通信中

const reducer = (prevState, action)=>{
  const newState = { ...prevState }
  switch(action.type){
    case 'add':
      newState.count ++
      return newState
    case 'minus':
      newState.count -- 
      return newState
    default:
      return prevState
  }
}
const initialState = {
  count: 0
}
// FC中
 const [state, dispatch] = useReducer(reducer, initialState)

 {
    dispatch({
      type: 'minus'
    })
  }}>-
  {state.count}
  {
    dispatch({
      type: 'add'
    })
  }}>+
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

8. 自定义hooks

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。
必须以use开头吗？必须如此。这个约定非常重要。不遵循的话，由于无法判断某个函数是否包含其内部Hook的调用，React将无法自动检查你的Hook是否违反了Hook的规则