[JavaScript知识库]react -- 2

说说你对自定义hooks的理解

?通过自定义hooks，可以将组件逻辑提取到可重用的函数中。

可以理解为hooks就是用来放一些重复代码的函数。

通过闭包的方式给return出来，这是非常高级的方式

说说你对useMemo的理解

useMemo接收两个参数，分别是函数和一个数组（实际上是依赖项），函数里面return函数，数组内存放依赖

使用memo可以帮助我们优化性能，让react没必要执行不必要的函数

说说对useContext的理解

?context 它可以将全局的数据通过provider接口传递value给到局部的的组件，让包裹在provider中的局部组件可以获取到全局数据的读写接口

import React, { createContext, useContext, useState } from \"react\";
const initialState = { m: 100, n: 50 }; // 定义初始state
const X = createContext(); // 创建Context
let a = 0;
export default function App() {
  console.log(`render了${a}次`);//用来检查执行App函数多少次
  const [state, setState] = useState(initialState); // 创建state读写接口
  a += 1;
  return (
    <X.Provider value={{ state, setState }}> // 通过provider提供value给包围里内部组件，只有包围里的组件才有效
      <Father></Father>
    </X.Provider>
  );
}

const Father = (props) => {
  const { state, setState } = useContext(X);//拿到 名字为X的上下文的value，用两个变量来接收读写接口
  const addN = () => {
    setState((state) => {
      return { ...state, n: state.n + 1 };
    });
  };

为什么不能在循环，条件或嵌套函数中调用Hooks？

?react中，父子组件的声明周期执行顺序是怎么样的？

?说说react事件和原生事件的执行顺序？

react的所有事件都是挂载在document 中，

当真实dom触发后冒泡到documnet后才会对react事件进行处理

所以原生事件会先执行

然后执行react合成事件

最后执行真正在document上挂载的事件

react 和vue有什么区别？

?react 是 Facebook 创建的javaScript UI框架，React推广了虚拟DOM 并创造了jsx语法，让我们可以在js中书写html代码

vue是尤雨溪开发的，也是使用虚拟dom 但是vue使用的是模板系统而不是jsx语法，因其模板系统都是用的普通的html，所有应用的升级更方便，更容易

react 是函数思想 ，在react中是单向数据流，推崇结合immutable来实现数据不可以变

vue是响应式思想，也就是基于数据可变的，通过对每一个属性建立watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom

react 的性能优化是需要手动去做的

vue的性能优化是自动的

Redux 和Vuex 有什么区别，它们有什么共同的思想？

相同点：

• state共享数据
• 流程一致：定义全局state，触发，修改state
• 原理相似，通过全局注入store

不同点：

redux??

1. 组件点击事件或者其他方法 发送 action

2. store 接收到 action 会把 oldState ?和 ?action 发送给 reducers

3. reduers 匹配对应的 action 就会修改 对应的 state

4. state 改变 store 触发监听函数 去修改 component视图

5. 单向数据流管理组件的状态

vuex

定义了state，getter，mutation，action 四个对象

1. store ?全局的唯一的仓库
2. state ?对象 存放数据的地方 ?修改state Vue 响应式系统执行 ?更新数据 刷新组件视图
3. action 动作 发送信号
4. ?mutation 修改数据的地方

用户通过点击或者发送一个 action

action 接收这个信号 ?去通知 mutations

mutations 会立即去修改mutate管理这个数据状态state

state状态发生改变,vue会触发响应式视图系统 ?直接更新数据 ?刷新视图

全局的数据状态更新过程就结束了

你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

• # vuex 四个辅助函数 ? (mapState 辅助函数帮助我们生成计算属性，让你少按几次键)
• # mapState
• # mapMutations
• # mapActions
• # mapGetters

mobx 和 redux有什么区别？?