Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
ref 的作用是获取实例，可能是 DOM 实例，也可能是 ClassComponent 的实例。
React中的Ref转发是一种强大的技术，用于在函数式组件中传递和访问DOM元素或子组件的引用。它允许你在函数组件中像类组件一样使用Ref，使代码更清晰和可维护。
使用 React 时，我们的默认思维方式应该是 不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 DOM 。
ref 对象就是用 createRef 或者 useRef 创建出来的对象，一个标准的 ref 对象应该是如下的样子：
本文通过四种方式来告诉你如何使用，虽然有一种被放弃了。今日早读文章由老虎集团@joking_zhang翻译授权分享。
最近看了一些 Ant Design 的组件源码，学到一些很实用的技巧，这篇文章来分享一下。
在React组件中，props是父组件与子组件的唯一通信方式，但是在某些情况下我们需要在props之外强制修改子组件或DOM元素，这种情况下React提供了Refs解决
通常情况下，我们想获取一个组建或则一个HTML元素的实例通过 Ref特性 就可以实现，但是某些时候我们需要在子父级组建中传递使用实例，Forwarding Refs提供了一种技术手段来满足这个要求，特别是开发一些重复使用的组建库时。比如下面的例子：
forwardRef是React中的一个高级组件 ，主要用于实现 ref转发 或 透传
一、React.createRef() GitHub： https://github.com/AttackXiaoJinJin/reactExplain/blob/master/react16.8.6/packages/react/src/ReactCreateRef.js
文章中涉及到的知识都是渐进式的讲解开发，当然如果对之间内容不感兴趣(已经了解)，也可以直接切入本文内容，每一个章节都和之前不会有很强的耦合。
众所周知，React 通过声明式的渲染机制把复杂的 DOM 操作抽象成为简单的 state 与 props 操作，一时圈粉无数，一夜间将前端工程师从面条式的 DOM 操作中拯救出来。尽管我们一再强调在 React 开发中尽量避免 DOM 操作，但在一些场景中仍然无法避免。当然 React 并没有把路堵死，它提供了 ref 用于访问在 render 方法中创建的 DOM 元素或者是 React 组件实例。
useRef 还可以传入一个初始值，这个值会保存在 ref.current 中，上面代码中，如果不给 div 元素传递 ref={divRef}，则 divRef.current 的值将是我们传入的初始值。
一直以来，ssh 身边都有很多小伙伴对 TS 如何在 React 中运用有很多困惑，他们开始慢慢讨厌 TS，觉得各种莫名其妙的问题降低了开发的效率。
React.Children功能：可以遍历访问子元素，同时可以访问到属性 this.props.children ，无法访问到的数据。
之前也有context，相当于自动向下传递的props，子树中的任意组件都可以从context中按需取值（配合contextTypes声明）
antd3思想：使用HOC（高阶组件）包裹form表单，HOC组件中的state存储所有的value值，定义设置值和获取值的方法 缺点：动一发牵全身，一个value值改变，因为这是顶级状态，所以所有的子组件都会因父组件的重新render而render,浪费了性能
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。
高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。
ref 可以理解为指向React 元素的变量，方便其他组件访问这个React元素。
在函数式组件中，useRef 是一个返回可变引用对象的函数。该对象.current属性的初始值为useRef传入的参数initialVale。
于 2017.09.26 Facebook 发布 React v16.0 版本，时至今日已更新到 React v16.6，且引入了大量的令人振奋的新特性，本文章将带领大家根据 React 更新的时间脉络了解 React16 的新特性。
使用函数创建组件，有一个非常特殊的地方。那就是当组件重新刷新时，组件函数会重新执行。于是在这种情况下，如何在函数内部持久化保存一个数据或者状态就变成了一个需要探讨的问题。
在cms后台管理系统中，大家一定绕不开对Form表单的使用，接下来我们就来详细解析下Antd4 Form的背后实现以及数据仓库的知识。其实Form表单就做了以下几件事情：
（2）区别 Redux更多的是遵循Flux模式的一种实现，是一个 JavaScript库，它关注点主要是以下几方面∶
很多同学用react开发的时候，真正用到的React的api少之又少，基本停留在Component,React.memo等层面,实际react源码中，暴露出来的方法并不少，只是我们平时很少用。但是React暴露出这么多api并非没有用，想要玩转react,就要明白这些API究竟是干什么的，应用场景是什么，今天就让我们从react 到 react-dom,一次性把react生产环境的暴露api复习个遍(涵盖90%+)。
最近准备培训新人, 为了方便新人较快入手 React 开发并编写高质量的组件代码, 我根据自己的实践经验对React 组件设计的相关实践和规范整理了一些文档, 将部分章节分享了出来. 由于经验有限, 文章可能会有某些错误, 希望大家指出, 互相交流.
调用setState之后发生了什么？ 在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。 扩展1: setState的第一个参数除了对象,还能传什么？ ---函数,参数为当前state
1、最重要的两个目录，react，react-dom，（react-reconciler后续会很重要）
在 React 中，ref 是一种用于访问组件或 DOM 元素的引用的特殊属性。在组件中存储对 DOM 节点或组件实例的引用，直接访问和操作
Ref forwarding 是一个特性，它允许一些组件获取接收到 ref 对象并将它进一步传递给子组件。
现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细粒度的逻辑(状态逻辑、行为逻辑等)，复用起来却不那么容易，很难把状态逻辑拆出来作为一个可复用的函数或组件，实际上在Hooks出现之前，都缺少一种简单直接的组件行为扩展方式，对于Mixin、HOC、Render Props都算是在既有(组件机制的)游戏规则下探索出来的上层模式，一直没有从根源上很好地解决组件间逻辑复用的问题，直到Hooks登上舞台，下面我们就来介绍一下Mixin、HOC、Render Props、Hooks四种组件间复用的方式。
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们只分享了类组件中获取实例的方式没提函数式组件。那是因为函数组件是一个函数，执行完之后就会被销毁，所以正常我们不能直接获取函数组件的实例的。
React 在 v16.8.0 版本中推出了 Hook，作为纯函数组件的增强，给函数组件带来了状态、上下文等等；之前一篇关于 React Hooks 的文章介绍了如何使用一些官方钩子和如何自建钩子，如果想要了解这些内容的同学可以访问《看完这篇，你也能把 React Hooks 玩出花》。
虚拟DOM 相当于在js 和 真实DOM中间加了一个缓存，利用DOM Diff 算法避免了没有必要的DOM操作，从而提高性能
在上一篇文章中，我们写好了任务组页面，就现在来说我们的项目已经基本完成了，所有的 CRUD 操作、路由跳转、页面布局都已经实现了。在这一篇文章中，我们再来优化一下我们的项目，我们给我的看板页面添加一个拖拽功能
一段时间以前，我们写了一篇文章有关我们即将升级我们遗留的生命周期方法，包含着我们慢慢的迁移的策略。在React 16.3.0这个版本中，为了慢慢迁移，我们增加了一些新的生命周期。我们也推荐了一些被长期期待的一些特性：一个官方的context api，一个 forwarding ref，一个ergonomic ref。
关于 React16 开始应用的新生命周期： 可以看出，React16 自上而下地对生命周期做了另一种维度的解读：
而且还可以使用 useImperativeHandle 自定义传给父元素的 ref：
（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中
在React中state、props、Refs都是最基础的概念，本文将同时梳理下这三个知识点，主要内容包括：
正如 我们的React教程第一部分 【点击直达】中所指出的，开始使用 React 相对容易。首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，随着时间的推移，代码可能会变得难以维护，特别是在你不熟悉 React 的情况下。组件有可能会变大，或者你可能最终得到一堆不是组件的组件，最终你可能会到处编写重复的代码。
最后，在调和阶段，上述 React element 对象的每一个子节点都会形成一个对应的 fiber 对象，然后通过 sibling、return、child 将每一个 fiber 对象联系起来。
使用API React.createContext 返回的是组件对象 可以利用结构的方式
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
