小白小白从不日别的博客

 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起； 但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作； 所以在父组件中，使用 inputRef.current时，实际上使用的是返回的对象； 子组件拿到父组件中创建的ref，绑定到自己的某一个元素中； 直接暴露给父组件带来的问题是某些情况的不可控； 父组件可以拿到DOM后进行任意的操作；自定义暴露出去的数据在。

解释：通过useRef获取DOM元素或组件实例：绑定ref后，和React.createRef返回的结构一致，通过获取到元素。在文件中定义一个全局变量保存数据存在 bugUseRef.jsx这种全局保存变量的方式，有问题，原因在于在组件中多次使用这个组件会共享数据，可能会导致一些bug存在。在函数组件中直接定义变量存在 bug这种方式可以短暂的保存值，但是一旦函数组件更新渲染，那么这个变量的值就会重置原因是因为函数组件更新渲染时，代码从上往下重新运行。在整个生命周期里ref里存储的都

useMemo 用于缓存一些耗时的计算结果（返回值），只有当依赖项改变时才重新进行计算。useCallback(func, [deps]) 等同于 useMemo(() => func, [deps]) useCallback 缓存的是方法的引用，useMemo 缓存的是方法的返回值，适用场景都是避免不必要的子组件渲染。

相当于计算属性!!!useMemo实际的目的也是为了进行性能的优化。◼ 如何进行性能的优化呢？ useMemo返回的也是一个 memoized（记忆的） 值； 在依赖不变的情况下，多次定义的时候，返回的值是相同的；return this.state.name + '计算属性'render() {相较于 useCallback 而言，useMemo 的收益是显而易见的。useMemo 建议适当使用如果没有使用 useMemo，会在每一次渲染的时候执行。如果使用了useMemo，只有在a。

useCallback缓存的是一个函数，主要用于性能优化!!!

很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是◼ 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分； 或者这次修改的state需要依赖之前的state时，也可以使用；useState 的替代方案，它接收一个的 reducer 处理函数，并返回当前的 state 和 配套 的 dispatch 方法。使用方法与 redux 非常相似。

◼ 类组件可以通过 类名.contextType = MyContext方式，在类中获取context； 多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context；

◼ useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新； useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；官方更推荐使用useEffect而不是useLayoutEffect。◼如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。

React 在构建用户界面整体遵循函数式的编程理念,即固定的输入有固定的输出,尤其是在推出函数式组件之后，更加强化了组件纯函数的理念。但实际业务中编写的组件不免要产生请求数据、订阅事件、手动操作 DOM 这些副作用 effect ，这样难免让函数组件变得不那么纯,于是 React 提供 useEffect 和 useLayoutEffect 这样的 hook,给开发者提供专门管理副作用的方式。◼。

useState 可以使函数组件像类组件一样拥有 state，也就说明函数组件可以通过 useState 改变 UI 视图。那么 useState 到底应该如何使用，底层又是怎么运作的呢，首先一起看一下 useState。问题：Hook 是什么?一个 Hook 就是一个特殊的函数，让你在函数组件中获取状态等 React 特性使用模式：函数组件 + Hooks特点：从名称上看，Hook 都以 use 开头状态的使用：1 读取状态 2 修改状态。

◼Hook是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。◼我们先来思考一下class组件相对于函数式组件有什么优势？◼ class组件可以定义自己的state，用来保存组件自己内部的状态； 函数式组件不可以，因为函数每次调用都会产生新的临时变量；◼ class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑； 比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次；

高级组件到底能够解决什么问题？举一个特别简单的例子，话说小明负责开发一个 web 应用，应用的结构如下所示，而且这个功能小明已经开发完了。但是，有一天老板突然提出了一个权限隔离的需求，就是部分模块组件受到权限控制，后台的数据交互的结果权限控制着模块展示与否，而且没有权限会默认展示无权限提示页面。（如下图，黄色部分是受到权限控制的组件模块）那么小明面临的问题是，如何给需要权限隔离的模块，绑定权限呢？那第一种思路是把所有的需要权限隔离的模块重新绑定权限，通过权限来判断组件是否展示。

而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案 可以编写局部css：css具备自己的局部作用域，不会随意污染其他组件内的元素； 可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式； 支持所有的css特性：伪类、动画、媒体查询等； 编写起来简洁方便、最好符合一贯的css风格特点； 等等...事实上，css一直是React的痛点，也是被很多开发者吐槽、诟病的一个点 Vue通过在.vue文件中编写。

这种方式稍微感觉有点麻烦，如果组件嵌套过深，那么通信显得非常繁琐，会一层一层往上传递，然后又一层一层往下传递。

我们从上面可以清楚地看到，组件本质上就是类和函数，但是与常规的类和函数不同的是，组件承载了渲染视图的 UI 和更新视图的 setState 、 useState 等方法。React 在底层逻辑上会像正常实例化类和正常执行函数那样处理的组件。因此，函数与类上的特性在 React 组件上同样具有，比如原型链，继承，静态属性等，所以不要把 React 组件和类与函数独立开来。接下来，我们一起着重看一下 React 对组件的处理流程。

Web应用中，事件处理是重要的一环，事件处理将用户的操作行为转换为相应的逻辑执行或界面更新。在React中，处理事件响应的方式有多种，本文将详细介绍每一种处理方式的用法、使用场景和优缺点。如果原生DOM有一个监听事件，我们可以如何操作？

React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。