react相关问题

React Hooks

就是用函数的形式代替原来的继承类的形式，并且使用预函数的形式管理state。

• 纯函数组件没有状态
• 纯函数组件没有生命周期
• 纯函数组件没有this

四种最常用钩子

• useState()
• useContext()
• useEffect()
• useReducer()
• useRef()

自定义hooks（倒计时）

export default function useCountDown (initCount = 10, callBack = () => {}) {
  const timeId = useRef(null)
  const [count, setCount] = useState(initCount)
  const start = () => {
    setCount(initCount)
    timeId.current = setInterval(() => {
      setCount((count) => count - 1)
    }, 1000)
  }
  useEffect(() => {
    return () => {
      console.log('111')
      clearInterval(timeId.current)
    }
  }, [])
 
  useEffect(
    () => {
      console.log(count, timeId.current)
      if (count === 0) {
        clearInterval(timeId.current)
        callBack()
      }
    },
    [count]
  )
 
  return { count, start }
}

 react hook 使用有什么限制

1. 只能在函数组件中使用：React Hook只能在函数组件中使用，不能在类组件中使用。

2. 需要遵循Hook规则：React Hook有一些规则需要遵循，例如Hook必须在组件的顶层使用，不能在循环或条件语句中使用，以及自定义的Hook名称必须以“use”开头等。

3. 需要按照正确的顺序调用Hook：在函数组件中使用Hook时，需要按照正确的顺序调用Hook，不能跳过任何Hook或者改变它们的顺序。

4. Hook的状态是独立的：每个使用Hook的组件都有自己的状态，这些状态是独立的，不会互相影响。

React Fiber机制

是从React v16开始引入的新协调引擎，用来解决主线程长时间被 JS 运算占用的问题，实现Virtual DOM的增量渲染。使用了浏览器的requestIdleCallback这一 API。

在React要加载或更新一颗组件树之前，会调用各组件的生命周期函数 --> 计算和对比Virtual DOM --> 更新真实的DOM树。这个过程是同步的，当组件树比较庞大时问题就出现了。

利用分片的思想，把耗时长的更新任务拆解成一个个小的任务分片，每执行完一个小的任务分片，都归还一次主线程。

过程会调用到这几个生命周期函数，但是如果是函数组件的时候不影响。

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps
• shouldComponentUpdate

react 组件渲染流程

1. 组件实例化：在React应用程序中，当一个组件被使用时，它会被实例化为一个组件实例，也称为组件对象。在组件实例化过程中，React会创建组件实例，并调用组件的构造函数来初始化组件状态和属性等。

2. 组件挂载：当组件实例化完成后，React会将该组件挂载到虚拟DOM树上。在组件挂载过程中，React会调用组件的生命周期方法，例如componentWillMount()和componentDidMount()。

3. 组件更新：当组件的状态或属性发生变化时，React会对该组件进行更新。在组件更新过程中，React会执行一些生命周期方法，例如shouldComponentUpdate()，以确定是否需要更新组件。

4. 组件卸载：当组件不再需要时，React会将其从虚拟DOM树上卸载。在组件卸载过程中，React会调用componentWillUnmount()生命周期方法。

redux的核心和流程 

Redux是一个用于状态管理的开源库。核心思想是将应用程序状态存储在单一的状态树中，并使用纯函数来处理状态的变化。Redux的核心包括：

1. Store（仓库）：Redux应用程序的状态存储在一个单一的状态树中，该状态树被存储在一个称为“Store”的对象中。Store可以通过createStore()方法创建，它接收一个reducer函数作为参数，用于处理状态的变化。

2. Action（动作）：Action是一个描述状态变化的纯对象，它必须包含一个type属性，用于描述该动作的类型。Action还可以包含其他属性，用于传递数据或信息。

3. Reducer（约定函数）：Reducer是一个纯函数，用于处理状态的变化。Reducer接收当前状态和一个Action作为参数，并返回一个新的状态。Reducer的设计原则是不改变原有的状态，而是返回一个全新的状态对象。

4. Dispatch（发送）：Dispatch是一个将Action发送到Reducer的方法。它接收一个Action作为参数，并将该Action发送到Store的reducer函数中进行处理。Dispatch可以通过调用store.dispatch(action)来调用。

5. Subscribe（订阅）：Subscribe是一个用于注册监听器的方法。它接收一个回调函数作为参数，并在Store的状态发生变化时调用该回调函数。Subscribe可以通过调用store.subscribe(listener)来调用。

Redux的流程： 

1. 应用程序触发一个Action，这个Action被分发给Store。

2. Store将该Action发送给它的reducer函数进行处理，并生成一个新的状态。

3. Store将新的状态存储在状态树中。

4. 如果有订阅Store的监听器，Store将通知这些监听器状态发生了变化。

5. 应用程序可以通过Store.getState()方法获取新的状态，并使用该状态来更新UI。

react 组件渲染和销毁前的操作如何处理 

effect hook 

在类组件中，可以在componentDidMount 中设置订阅，并在componentWillUnmount中清除它，那么在useEffect中设置的订阅，我们如何清除呢

函数组件就通过 useEffect 处理

// 第二个参数传的是空数组，相当于componentDidMount
useEffect(() => {
  function handleScroll() {}
  window.addEventListener('scroll', handleScroll)
  // 相当于componentWillUnmount
  return function cleanup() {
    window.removeEventListener('scroll', handleScroll)
  };
}, []);