React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
什么是react生命周期呢？当我们使用各种框架开发程序时，当这个框架启动、程序刚运行时、各个页面之间的交互、数据渲染到页面上面、程序运行结束，应当会有个闭环的操作，而在这个环的起点和终点之间的各个节点，框架给给定一些特定函数供我们自行调用，方便我们执行一些操作，这便是生命周期。react也是如此。
当我们尝试在类组件中使用useState 钩子时，会产生"React hook 'useState' cannot be called in a class component"错误。为了解决该错误，请将类组件转换为函数组件。因为钩子不能在类组件中使用。
hooks API是 React 16.8的"新增"功能（16.8更新于2年前）。官网是这么说的：
在 React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。那么在 React 的生命周期中，有哪些钩子函数呢，我们来总结一下
React 是一个流行的JavaScript库，用于构建用户界面。在 React 16.8 版本中引入了钩子（Hooks）的概念，它为函数组件提供了状态管理和其他功能。本文将着重介绍最常用的钩子之一：useState()。
那么如何使Clock组件真正 可重用和封装？它将设置自己的计时器，并每秒更新一次。
目前,我们只学习了一种方法来更新UI,即调用 ReactDOM.render() 改变输出
React v16.7.0-alpha 中第一次引入了 Hooks 的概念，在 v16.8.0 版本被正式发布。React Hooks 在 React 中只是对 React Hook 的概念性的描述，在开发中我们用到的实际功能都应该叫做 React hook。
以前，React API 只有一套，现在有两套：类（class）API 和基于函数的钩子（hooks） API。
两者最明显的不同就是在语法上： 函数组件是一个纯函数，它接收一个 props 对象返回一个 react 元素； 类组件需要去继承 React.Component 并且创建 render 函数返回 react 元素，虽然实现的效果相同，但需要更多的代码。
从 Vue 迁移到 React ，不太习惯 React Hooks 的使用？也许换个角度思考 Hooks 出现的意义会对你有所帮助。 1 什么是 Hooks 简而言之， Hooks 是个函数，通过使用 Hooks 可以让函数组件功能更加丰富。 在某些场景下，使用 Hooks 是一个比使用类组件更好的主意。 1.1 Hooks 出现的背景 在 Hooks 出现之前，函数组件对比类组件（class）形式有很多局限，例如： 不能使用 state、ref 等属性，只能通过函数传参的方式使用 props 没有生命周
现在流行的前端框架，无论是angular还是React，又或是Angular2以及以上，都由框架自身提供了生命周期（有的叫生命周期钩子）供开发者使用。
要了解 JSX，首先先了解什么三个主要问题，什么事 VDOM，差异更新和 JSX 建模：
路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
如果是自定义方法，React不会自己去调用，因此一般使用变量+箭头函数的形式，将该自定义方法作为一个事件的触发函数
React就是Facebook的一个开源JS框架，专注的层面为View层，不包括数据访问层或者那种Hash路由（不过React 有插件支持），与Angularjs，Emberjs等大而全的框架不同，React专注的中心是Component，即组件。React认为一切页面元 素都可以抽象成组件，比如一个表单，或者表单中的某一项。
两者都是用来初始化state的。前者是ES6中的语法，后者是ES5中的语法，新版本的React中已经废弃了该方法。
⚠️ 注意 ：不能调用setState() 原因是render是每次组件渲染时触发的，如果在里面凋setState()，则组件数据发生变化，肯定要重新渲染，但是重新渲染又会触发render。就会形成死循环！！！
注意： setState()既能更新状态又能更新UI。如果在render()里继续调用setState(),setState()又会调用render(),所以产生了递归。会导致报错。
React 的基础之：JSX 语法 react 使用 JSX 语法，js 代码中可以写 HTML 代码。 let myTitle = Hello, World!; JSX 语法解释： (1) JSX 语法的最外层，只能有一个节点： //错误 let myTitle = HelloWorld (2) JSX 语法中可以插入 JavaScript 代码，使用大括号。 let myTitle = {'Hello' + 'World'} Babel
Hello
World
{'Hello' + 'World'}
React v16.8 引入了 Hooks，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用，从而易于共享逻辑。Hook 令人兴奋并迅速被采用，React 团队甚至想象它们最终将替换类组件。
相信应用层面的知识，大家都比较熟悉了，实际 React 用来实现业务对于熟悉 Vue 的开发人员来说也不是难事，今天我们简单的了解一下 React 和 Vue 。（瞎聊聊）
为了解决跨浏览器兼容性问题， React会将浏览器原生事件（ Browser Native Event）封装为合成事件（ Synthetic Event）并传入设置的事件处理程序中。
React的核心是组件，组件在创建和渲染的过程中，需要调用固定的钩子函数，也称为组件的“生命周期”。利用生命周期函数，可以做初始化工作，并在渲染过程中实现一些特定功能。
在 React 中，对于每一次由状态改变导致页面视图的改变，都会经历两个阶段：render 阶段、commit 阶段。
利用高阶组件的 条件渲染 特性可以对页面进行权限控制，权限控制一般分为两个维度：页面级别 和 页面元素级别
咱今天聊的话题是React生命周期，灵感来自于最近在网上发现一篇关于react生命周期的文章，里面记录的知识点竟然与小编所get到的有出入。作为一名集正义、智慧、颜值于一身的技术人，怎么受得了。于是借此机会，当一回正义小王子~呵。咱要拿结果去碾压这种忽悠人的行为。这也印证了一句老话：网上的东西不一定都是对的，实践才是检验真理的唯一标准......
你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
（2）区别 Redux更多的是遵循Flux模式的一种实现，是一个 JavaScript库，它关注点主要是以下几方面∶
props 更新流程： 相对于 state 更新，props 更新后唯一的区别是增加了对 componentWillReceiveProps 的调用。关于 componentWillReceiveProps，需要知道这些事情：
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由composition api带出来的概览，而composition api（组合api） 和 optional api（可选api） 两种组织代码的方式，相信大家在vue3各种相关的介绍文里已经了解到不少了，它们可以同时存在，并非强制你只能使用哪一种，但组合api两大优势的确让开发者们更倾向于使用它来替代可选api。
前言 如果将React的生命周期比喻成一只蚂蚁爬过一根吊绳，那么这只蚂蚁从绳头爬到绳尾，就会依次触动不同的卡片挂钩。在React每一个生命周期中，也有类似卡片挂钩的存在，我们把它称之为‘钩子函数’。 那么在React的生命周期中，到底有哪些钩子函数？React的生命周期又是怎样的流程？今天我给大家来总结总结。 React 生命周期 如图，React生命周期主要包括三个阶段：初始化阶段、运行中阶段和销毁阶段，在React不同的生命周期里，会依次触发不同的钩子函数，下面我们就来详细介绍一下React的生命周期
我们可以看到了arr.map ，它调用的是map方法，那arr 就得是一个数组，但是大家看下面，它给我们传过来得是也给Number,Number根本就没有map方法，那这个时候就一定会报错。
组件使你可以将 UI 划分为一个一个独立，可复用的小部件，并可以对每个部件进行单独的设计。
简言之，HOC是一种组件的设计模式，HOC接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。
props属性是从父组件传过来的。当父组件改变了传递给子组件的数据时，子组件内部就会触发该函数。 以下流程发生在子组件内部：子组件内部
总结： 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。
原文链接：https://bobbyhadz.com/blog/react-cant-perform-react-state-update-on-unmounted-component[1]
原文: https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e
生命周期是React中非常重要的一个部分，可以说学了React但不会生命周期 = 白学
在类定义中，我们可以使用到许多 React 特性，例如 state、 各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。
使用jsx创建对象。并最后使用ReactDom.render(param1, param2)去对对象渲染。其中param1为js创建的变量，param2为原生dom方法选中的html元素。
在 React源码中，当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback方法。
团队中每个开发人员的水平不同，技术关注点不同，如果没有一份代码规范的参照和约束，那么项目中的代码将会风格迥异，难以维护，为保证代码质量和风格统一，特此拟定一份《团队React 代码规范》，这样整个团队的开发人员可以参照这份代码规范进行编码，从而让团队的代码风格统一，利于维护。如果你的团队还没有这么一份 React 代码规范，也许这正是你需要的；如果你的团队已经有了 React 代码规范，这份规范也许能起到锦上添花的效果。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
