学习React Native需要先学习React JS吗

React的生命周期从广义上分为三个阶段：挂载、渲染、卸载 因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。 下图是旧生命周期图 下图是新生命周期图 1.挂载卸载过程 <span id="jump1">1.1 constructor()</span> constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。 <span id="jump2">1.2 componentWillMount()</span> componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。 <span id="jump3">1.3 componentDidMount()</span> 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染 <span id="jump4">1.4 componentWillUnmount()</span> 在此处完成组件的卸载和数据的销毁。 原因：因为你在组件中的ajax请求返回setState,而你组件销毁的时候，请求还未完成，因此会报warning 解决方法： 2.更新过程 <span id="jump5">2.1 componentWillReceiveProps (nextProps)</span> <span id="jump6">2.2 shouldComponentUpdate(nextProps,nextState)</span> <span id="jump7">2.3 componentWillUpdate (nextProps,nextState)</span> shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。 <span id="jump8">2.4 componentDidUpdate(prevProps,prevState)</span> 组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。 <span id="jump9">2.5 render()</span> render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。 3.新增两个生命周期 <span id="jump10">3.1 getDerivedStateFromProps(nextProps, prevState)</span> 代替componentWillReceiveProps()。 老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。 举个例子: 这两者最大的不同就是: 在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。 I. 在老版本的 React 中，这两件事我们都需要在 componentWillReceiveProps 中去做。 II. 而在新版本中，官方将更新state与触发回调重新分配到了getDerivedStateFromProps 与componentDidUpdate中，使得组件整体的更新逻辑更为清晰。而且在getDerivedStateFromProps中还禁止了组件去访问this.props，强制让开发者去比较nextProps与prevState中的值，以确保当开发者用到getDerivedStateFromProps这个生命周期函数时，就是在根据当前的props来更新组件的state，而不是去做其他一些让组件自身状态变得更加不可预测的事情。 <span id="jump11">3.2 getSnapshotBeforeUpdate(prevProps, prevState)</span> 代替componentWillUpdate。 常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。 这两者的区别在于： I. 在React开启异步渲染模式后，在render阶段读取到的DOM元素状态并不总是和commit阶段相同，这就导致在componentDidUpdate中使用componentWillUpdate中读取到的DOM元素状态是不安全的，因为这时的值很有可能已经失效了。 II. getSnapshotBeforeUpdate会在最终的render之前被调用，也就是说在getSnapshotBeforeUpdate中读取到的DOM元素状态是可以保证与componentDidUpdate中一致的。 此生命周期返回的任何值都将作为参数传递给componentDidUpdate（）。

知乎用户，詹彦峤、朱超强、赵鹏 等人赞同如果是技术选型调研的话，除了好处也应该了解一些需要注意的问题吧，下面随便列列，仅供参考。1. 不要陷入纠结工具的怪圈我们团队一开始用 React 的时候，工具栈应该是 grunt + grunt-react；写了一段时间感觉有局限，然后老大带头把工具换成了 gulp + browserify + watchify + reactify，然后又愉快的写了大概半年吧，发现流行的库都上 webpack 了；于是我们的工具栈又变成了 gulp + webpack + babel-loader。最后大家一致认为 gulp 是多余的，所以我们的工具栈又围绕 webpack 重新搭建了一遍。到最近我负责的一个内部项目，什么 hot-module-replacement、extract-text-plugin（让你在 js 里 require("style.scss"); 这么写的玩意儿）一股脑的造。当然再后来因为业务需要我们又基于 webpack 搭建了自己的构建工具，这是后话……这将近一年半的折腾历史告诉大家，1) 前端就是个大坑，1个月不学新知识你就会被社区遗忘 2) 现在上 React 真幸福，工具栈基本都稳定了（什么看你还不懂看用 webpack！），不用花太多时间纠结。PS. HMR 也就那样，虽然 dan 吹得神乎其神，但实际在项目里我发现大家还是习惯手动 Cmd + R，因为项目大了以后 rebuild 也需要 1、2 秒。2. DOM 操作是不可避免的但凡是上点儿规模的前端项目，没有 DOM 操作基本是不可能的。且不说最常见的后端「埋点」，你总得用 DOM API 去取值吧；就说一个最简单的，比如右手边这个「回到顶部」的按钮，你纯用 React 写一个试试。当然你会说什么 requestAnimationFrame，什么 ReactCSSTransitionGroup blah blah blah，真正到项目里你会发现还是 DOM API 简单。3. 拥抱 ES 6，拥抱 React v0.14这俩为什么放在一起说呢看因为 React v0.14 里提出了一个全新的组件概念叫做：无状态的函数式组件（Stateless functional components）。它大概长这样：var Aquarium = ({species}) => ( {getFish(species)});有没有发现被传统的 createClass 方法精简了很多看当然这样写组件也有很多局限，比如不能声明各种生命周期方法等等，但是在常见的前端业务场景中，纯 render 的组件不在少数。在这样的语法推出后，我们就能把这些组件更方便的抽出来复用了。此外，拥抱 ES 6 还有很多的好处，比如在加载依赖的时候不用先 var xxx = require("xxx"); 再 var y = xxx.y; 而是可以直接 import {y} from "xxx"; 简洁明了。4. 生态环境仍然在成长中，坑不少其中首先要口诛笔伐一下的就是 react-router，我们从 v0.10 开始用，到现在 v1.0。你知道为了升级这玩意儿我们改了多少次业务代码么看每次升级 API 都要变，无力吐槽。当年好不容易搞懂了 v0.11，在博客里写了篇技术文章分享，结果后面的日子就是各种被催更……一个月前抽空就 0.13 版又重写了一遍教程，这不 1.0 版又出了，API 基本全都不一样了！！不一样了！！一样了！！样了！当然除了坑也有不少高质量的生态环境产品，比如蚂蚁的 ant design。5. Server 端渲染很美，至今没看见哪个规模级的产品用到可能是我孤陋寡闻吧，欢迎评论中跟进。自己摸索着写过一个最简单的 server 端渲染，但是这套逻辑如果套到我们现在的业务逻辑中，几乎可以直接枪毙。为了实现 server 端渲染需要做出的 trade off 太多。6. React 很简单，也很难简单是因为 React 的 API 真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看 Angular……）。但是当你以为你真的搞懂 React 的时候，看看React 源码剖析系列 － 解密 setState - pure render - 知乎专栏这篇文章开头提的问题，有多少人能不假思索的答对呢看（顺便安利一下，我们团队的知乎专栏，目前处于死磕 React 的状态）当你真正在业务项目中使用 React 的时候，你会发现它的生命周期比你想象的复杂；它的 API 背后的逻辑比你以为的麻烦。当然，首先你要踩进这个坑。7. 对于楼上某位仁兄表示《React：引领未来的用户界面开发框架》这本书太难的回答，作为译者之一表示对不起你。作为补偿，所有购买本书的同学均可凭拍照私信我咨询 React 相关的问题。最后再次安利一下我们团队的专栏： pure render - 知乎专栏8. 梦中惊醒补充一点，截止目前为止，Babel 6 是个大坑，业务中使用的时候一定要注意其与 Babel 5 的巨大区别。（关于补充的这一点，再额外的阐述一下，应该理解成 Babel 5 为了让大家愉快的用上 ES 6 做了一些非标准的转换，这些转换在 Babel 6 中都去掉了。所以你在 Babel 5 下面编译正常的代码在 Babel 6 编译时可能就会出错。这个问题不能确切的算作 Babel 的坑，但是会影响你的开发进度）

名词和动词的区别。

难说。react 在全球用得多，而 vue 在中国的用户比较多。

React 通常和其他的 JavaScript 框架同时被提及，但是说“React 对比 Angular”却讲不通，因为它们之间是不可比较的。Angular 是一个完整的框架（包括一个 view 层），React 却并不是。这也是 React 很难于理解的原因，它虽然抽离自一个具备完整框架的生态系统中，但仅仅是一个 view 层。React 提供了模板语法以及一些函数钩子用于基本的 HTML 渲染。这就是 React 全部的输出——HTML。你把 HTML / JavaScript 合到一起，被称为“组件”，允许把它们自己内部的状态存到内存中（比如在一个选项卡中哪个被选中），不过最后你只是吐出 HTML。

React 可以非常轻松地创建用户交互界面，设计简洁的状态视图，在数据改变时，高效地更新渲染界面，详细地来讲，它有以下的优势：1.使用虚拟DOM的概念，性能好，速度快。2.虚拟DOM帮助解决了跨浏览器问题，并为我们提供了标准化的API。3.代码一切皆是组件，更加模块化，重用代码更容易，可维护性高。4.纯粹的javascript代码预渲染你的应用，有助于搜索引擎优化。我之前学习react框架的时候看的是黑马程序员的视频，他们有基础和进阶的教程，学起来还不错，对于这个框架我有了很深刻的理解。

两者本质的区别：模板和组件化的区别 Vue本质是 MVVM 框架，由 MVC 发展而来； React是前端 组件化 框架，由后端组件化发展而来； Vue使用 模板 React使用 JSX React本身就是 组件化 Vue是在 MVVM 上扩展的 共同点： 都支持组件化，都是 数据驱动视图 监听数据变化的实现原理不同： 数据流的不同: 高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。 Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。 组件通信的区别： 渲染模版的不同： Vuex和Redux的区别: diff算法不同: 事件机制不同: 数据是否可变： react 整体是 函数式 的思想，把组件设计成 纯组件 ，状态和逻辑通过 参数 传入，所以在 react 中，是 单向数据流 ，推崇结合 immutable 来实现 数据不可变 。react在 setState 之后会重新走 渲染 的流程，如果 shouldComponentUpdate 返回的是 true ，就继续渲染，如果返回了 false ，就不会重新渲染 vue 的思想是 响应式 的，也就是基于是 数据可变 的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 dom vue: react: react 的性能优化需要 手动 去做，而 vue 的性能优化是 自动 的，但是 vue 的 响应式机制 也有问题，就是当 state 特别多的时候， Watcher 也会很多，会导致 卡顿 ，所以大型应用（ 状态特别多 的）一般用 react ，更加可控 通过js来操作一切，还是用各自的处理方式: reac t的思路是 all in js ，通过 js 来生成 html ，所以设计了 jsx ，还有通过 js 来操作 css vue 是把 html，css，js 组合到一起，用 各自 的处理方式， vue 有单文件组件，可以把 html、css、js 写到一个文件中， html 提供了 模板引擎 来处理。 类式的组件写法，还是声明式的写法: react是 类式 的写法，api很少 vue是 声明式 的写法，通过传入各种 options ， api 和 参数 都很多。所以 react 结合 typescript 更容易一起写，vue稍微复杂。vue3支持class类式的写法了 react整体的思路就是 函数式 ，所以推崇 纯组件，数据不可变，单向数据流 ，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于 可变数据 的，支持 双向绑定 。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的， vue追求的是开发的简单 ，而 react更在乎方式是否正确 。

这个难指的是react 更加灵活，写法更飘逸，vue.js 比较刻板毕竟大多数时候是基于temple ，但是简洁有简洁的好处,我在使用VUE的过程中，多少会有些反直觉，而写React真的就像写JS一样，可以平时多看看比如黑马程序员的公开课啥的，多学学跟着练就行。

React功能是用于构建用户界面的JavaScript库，[1]起源于Facebook的内部项目，该公司对市场上所有JavaScriptMVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。React主要用于构建UI。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTMLDOM元素、也可以传递动态变量、甚至是可交互的应用组件。

React和 Vue 以及是经常上 PK 台被进行比较的前端框架，我这边从以下几个方面对两者做一个比较，如果其中有理解不当的大家也可以随时纠正。学习曲线React陡峭的学习曲线是一直被诟病的一点。Vue 标榜的是一个渐进式的JavaScript框架，大部分开发者普遍会认为Vue 的学习曲线低于React，并且相较于React有更丰富的中文支持（主要是VUE开发者是中国人，导致了很多我国的程序员会关注此框架）。但是，随着学习内容的深入，当需要开发复杂的 Web 应用程序时，花哨灵活的指令和逻辑反而会让人觉得 Vue 比 React 更难掌控。简单来说，React是一个陡坡比较难上手，Vue是一个缓坡很容易上手，但是最终的高度两者差不多。技术社区React 是近十年的开源项目，因此它拥有成熟的技术社区支持。Vue尽管这几年势头很猛，但是要想建立一套完善的生态系统还需要一些时间来打磨。灵活性这也是争议最大的地方。React 专注于 UI，所以在构建 UI 组件时可以从它那里获得很好的支持。Vue 作为一个渐进式框架，只允许使用最基本的功能来构建应用程序，但同时也提供了一些开箱即用的东西：如，用于状态管理的 Vuex、用于应用程序 URL 管理的 Vue Router、Vue 服务器端渲染。Vue 剥离了许多元素，相比之下 React 更加全面。但如果您正在寻找一种精简、新颖、简单易学、样板代码少、高性能、灵活且完整的前端框架，Vue 更加适合；当然，如果您打算使用低版本 jQuery 代码，Vue 也同样支持。React 的灵活性则更多依赖于其背后强大的技术社区，在 Facebook 的强力支撑下（ Facebook 的 React 团队包括了 10 名专职开发人员），提供了更多工具、UI 库和教程。综上所述，我个人觉得在没有实际应用场景的情况下，很难比较出孰优孰劣，没有最好的框架，只有最适合的框架。如果是短期小项目，建议使用 Vue 可以快速敏捷开发（上手快，控件占用小，性能较好）。如果是移动端跨平台的应用推荐 React（ React Native 已经比较成熟而 Vue 的 Weex 仍在不断发展）。

使用React开发的项目，可以从加载性能和运行时性能两个方面进行优化。 加载性能优化的目标是让用户更早地看到界面、更早地和应用交互。运行时性能优化目标是降低卡顿，交互更流畅 。 我们知道React的setState会触发diff和更新。默认是将整个组件树进行对比，但很多情况下diff是不必要的，因为一个子组件的props没有改变，就不需要进行diff工作。 为了避免这种对没有改变props的子组件进行多余的diff工作的情况，React提供了shouldComponentUpdate这个生命周期钩子， shouldComponentUpdate(nextProps, nextState) 。 这个生命周期钩子如果返回true，则会执行后面的render和diff工作，如果返回false，则React不会向下继续。用户可以在这个生命周期钩子中进行state和props的对比，判断是否需要更新。通常一个组件当前的props与nextProps属性值相同，并且state的属性值也相同，则不需要更新。 React.PureComponent实现了shouldComponentUpdate这个方法，PureComponent采用了浅比较， 【 前端面试刷题网站 ： 灵题库 ，收集大厂面试真题，相关知识点详细解析。】 对应class组件的PureComponent，函数组件有React.memo方法实现类似的效果。 React.memo 由于默认的PureComponent和memo都是默认用的浅比较。因此如果对象层级较深，会导致漏更新。 解决办法是，如果对象改变，重新创建一个对象，如果数组改变，重新创建一个数组，解构赋值可以很容易地实现这一点： {...oldData}；[...oldArr] 。 用户可以自己实现shouldComponentUpdate以自定义比较逻辑，对于函数式组件，则可以通过React.memo的第二个参数来定义比较逻辑。 如果想要精确地判断区别，除了手动判断，还有一个自动化程度比较高的方式：不可变数据，这时一个不可变数据的JS实现： immutable-js 。 只有发生改动的节点会创建新的引用，因此相应的组件才会执行render和diff。 结论：最佳实践是PureComponent/React.memo + 不可变数据。 Fragment可以避免不必要的dom节点。 JSX的标签表达式要求有一个根节点 如果就想让表达式返回一个标签列表，不应该在最外层加一个根节点，应该使用Fragment。 也可以简写 在注册事件回调时候，不要用匿名函数或者用bind生成新函数，应该用箭头函数或者构造里面bind，最好是构造函数里面bind（因为可以继承）。 当我们需要注册事件回调时候，可以写成这样写： 或者 上面这两种：匿名函数和bind表达式，都不推荐 。因为匿名函数的写法会在每次调用render时候都创建新的函数，而bind表达式也会在每次调用时候创建一个新的函数，React做diff时候发现事件回调函数不同，就会将旧的函数解绑（这样还会触发GC）并且绑定新的函数。 因此最好这样实现 或者 更推荐后者，因为我们知道： class Test {log = () => {};} 和 class Test {log() {}} 这两种写法的区别在于前者log是类的实例方法，而后者是原型方法，因此在构造函数中绑定，能让其他使用原型继承方法继承Test的组件可以继承到log方法。 如果使用函数式组件，应该使用useCallback这个hook。关于useCallback的使用，请参考本知识库的React进阶一文。 因为React在解析JSX时候需要将style对象解析成css style字符串。更推荐将样式写在CSS中。 如果在render方法进行setState，可能导致循环地进行diff工作。 让条件分支中只包含需要改动的元素，不包含不需要改动的元素，防止diff子节点和更新节点时候增加不必要的操作，消耗性能。 示例： 应该改成下面这种写法： 我们知道，Vue中有计算属性的能力，能够根据依赖的数据计算出我们关心的数据，而且有缓存的能力：依赖的值不变的话，不需要计算，直接返回结果。 React如果想要实现根据依赖的数据计算我们关心的数据，方法很简单。 但是这样实现没有缓存值的能力，当计算耗时较长时候会影响性能。 如何实现缓存值的能力呢？ 可以使用memorize-one这个库： https://www.npmjs.com/package/memorize-one 如果使用函数式组件，可以使用useMemo来实现。关于useMemo库的使用，请参考本讲义中React进阶一文。 react-vitualize 启用concurrent mode之后，React会采取可中断渲染，让大规模的diff计算不会影响到界面的渲染，保证渲染和交互的流畅性。 使用Suspense组件可以在加载局部组件时候有更好的切换加载体验。 concurrent详细的介绍请阅读本系列concurrent mode文章。 不使用key或者用index作为key，都可能使列表在变化时候，让React无法辨别前后item对应关系，只能遍历对比，更新属性，这样可能会有多余的操作，造成性能损耗。 为什么需要key呢？我会单独写一篇文章详细讲解。 React官方提供了一个性能检测工具： react-addons-perf 。 这个工具可以在渲染React应用时候打印各个组件的各种耗时，用来分析性能浪费。 其中比较重要的一个方法是printWasted()，可以打印并未更新组件的渲染操作，如果发现你的组件花了很长时间render和diff，但组件视图实际并未发生变化，那就要考虑是否需要引入PureComponent等优化渲染性能了。

react 是 反应 是act 动作reflect 是 反映 是对一个现象体现出的问题意思完全不同

等等 react不是Nike的一个技术吗（手动滑稽）

rn是react native。React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。相关信息：React Native主张“Learn once, write everywhere”而非其他跨平台工具一直宣扬的“Write once, run everywhere”。通过React Native，开发者可以使用UITabBar、UINavigationController等标准的iOS平台组件，让应用界面在其他平台上亦能保持始终如一的外观、风格。

React 的函数调用栈可以分为三个部分 对应 react 源码调度体系的三个模块 React 是一个可以满足构建快速响应 web 应用程序的库 制约快速响应的因素主要是 计算能力 和 网络延迟 也就是CPU 和 IO React 的刷新频率是 60Hz 也就是 1000ms/60Hz=16.6ms 浏览器刷新一次 在这 16.6 ms 的过程中，浏览器要做三件事情： 如果，JS 脚本执行时间过长，那么就没有时间执行样式布局和样式绘制，这样浏览器就会出现卡顿的情况 为了解决这种情况，React 采用的方法是： 将同步的更新更改为异步可中断的更新 也就是，React 和浏览器做了一个约定，浏览器在每一帧都预留给 React 一定时间进行样式布局和样式绘制，如果某一项工作需要的时间比较长，React 会中断自己的工作，把控制权交还给浏览器，等待下一帧预留的时间，继续之前中断的工作 在一些需要请求数据结果才能做出响应的场景下，React 为实现快速响应的解决办法是：将人机交互的研究的结果整合到真实的 UI 中 React15 的架构中分为两部分，一部分决定渲染什么组件，另一部分决定将组件渲染到视图中 也就是 Reconciler（协调器）和 Renderer（渲染器） 在 Reconciler 中会将新旧组件做一个对比，找到要更新的组件，然后把组件交给 Renderer，不同的渲染器会把组件渲染到不同环境中 也就是：协调器找到更新，渲染器更新 DOM 但是，如果采用异步可中断的更新这种方式，这种架构就会导致更新的卡顿 比如，有一个列表，需要把 1，2，3 更新到 2，4，6，到更新完 1 --> 2，这个时候中断了更新，那么用户看到的就是 2，2，3 在新架构中，React 新增了一个 Scheduler（调度器） 这个调度器可以把需要更新的模块分好优先级，高优先级的任务可以优先进入协调器，如果这个时候有更高优先级的更新，那么前面那个任务会被中断 协调器完成 diff 操作，更新会进入渲染器 完成渲染后，调度器会开始新一轮的调度 举个例子，三个 li 显示 1，2，3，现在要把他们更新为 4，5，6，大概过程为： Fiber 一共有三层含义 新架构中的协调器是基于 Fiber 节点实现的，称为 Stack Reconciler 在这里，Fiber 是纤程的意思，和进程（Process）线程（Thread）协程（Coroutine）同为操作系统中的执行过程 它可以实现 每个 Fiber 节点对应一个组件，这个节点保存了关于这个组件的一些属性，这也就是我们常说的虚拟 DOM Fiber 保存了组件需要更新的状态以及需要执行的副作用 Fiber 架构中，采用了双缓存机制，双缓存就是，在 内存 中构建好要更新的内容，然后替换上一帧的内容 举个例子： 当首次 render 的时候，会创建一个 FiberRootNode 节点，这是整个应用的根节点，还会创建当前应用的根节点 RootFiber ， FiberRootNode 的 current 指向 RootFiber 接下来， 首屏渲染时 ，会再创建一棵 Fiber 树，叫做 workInProcessFiber 树 当 workInProcessFiber 树完成渲染时， FiberRootNode 的 current 就指向 workInProcessFiber 树 当更新导致的渲染时候，会再创建一个 workInProcessFiber 树，在这个过程中，会将 current Fiber 和返回的 jsx 结构作对比，这个过程也就是 diff 算法 然后， FiberRootNode 的 current 会指向新生成的 workInProcessFiber 树

所有的html，css都可以写在js中，这就是jsx的用法。 用于验证数据的类型是否是满足你的需要,不过我在现有的项目中没有特意的指定数据的propTyoe，因为这些都是前后端约定好的。 此用法如下图 ： 这个如同vue组件里面的props中的type：Array这个一样 这个与vue-router差不多，大家可以看文档。 react-router的中文官网 ： 中文官网 因为react与vue一样，都是使用vitural-dom，没有处理dom节点，从而大大提高了页面的渲染效率。 当你想要获取真实的dom节点的时候，可以使用ref，具体的使用，可以看阮一峰的react入门，我下面的todolist的demo里面也会涉及到。 不过在你使用无状态组件申明组件的时候，ref在这个组件中是不能使用的。 可以通过webpack安装各种依赖，我使用的最爽的一个就是react-hot-loader，就是热更新，非常好用。不过热更新其他的工具，比如 browser-sync ,下面是一些文档。 如vue的vue-cli脚手架， create-react-app ]( https://github.com/facebookincubator/create-react-app )，使用以上方法的话，与vue-cli脚手架工具类似 我自己的一些总结，单单学react是不难的，难的是要和一些工具混合来用，往往这个过程的成本最高。比如使用webpack构建，redux管理状态， redux-thunk 或者 redux-saga 来处理异步action。 还有一个很大的趋势就是前端变化很快，拿 react-router 来说，你做了一个项目， react-router@2.0.0 是能完美跑起来的，但是换成了当换成了 react-router@3.0.0 ，基本上就跑不起来了，更何况现在的 react-router 已经出到4.0， 相应的 webpack 也是这样，当时一些开发者基于 webpack1.0 开发的，当webpack升到2.0的时候， webpack.config,js 里面的文件要重新配置了。现在 webpack 已经更新到了3.0。 2， 阮一峰的文档： react的入门 ，webpack的入门， react-router 3，react的一些框架和一些轮子： 4，一个渐进的学react的demo。 里面基本上涉及到了，react入门的所有涵盖的知识，他都是自己搭的，没有使用脚手架工具。里面也涵盖了webpack的一些配置，对于新手学习蛮好的。 u200b 1，jquery、vue、react的todolist，最简单的 2，基于ant-dedign的一个react简单的demo 3,基于react写的一个简易大众点评的demo，里面用到了redux，mock，fetch，es6

按音标读。作为耐克缓震革命的一部分，Nike-React正在重新定义泡棉和其他缓震系统的可能性——例如Nike-Air-VaporMax和采用ZoomX泡棉的Nike-ZoomVaporfly4%——让每位运动员都可以选择适合自己的科技。

如上图所示： 在JavaScript中，事件的触发实质上是要经过三个阶段:事件捕获、目标对象本身的事件处理和事件冒泡。 事件委托的实质就是将子元素事件的处理委托给父级元素处理。把事件监听器添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到它是哪个子元素的事件。 举个栗子：如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件 事件委托优点 ： 不适用的情况： 比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托； mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托。 在 React事件介绍 中介绍了合成事件对象以及为什么提供合成事件对象，主要原因是因为 React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。 合成事件对象很有意思，一开始听名字会觉得很奇怪，看到英文名更奇怪 SyntheticEvent ， 实际上合成事件的意思就是使用原生事件合成一个 React 事件， 例如使用原生 click 事件合成了 onClick 事件，使用原生 mouseout 事件合成了 onMouseLeave 事件，原生事件和合成事件类型大部分都是一一对应，只有涉及到兼容性问题时我们才需要使用不对应的事件合成。 合成事件是浏览器的原生事件的跨浏览器包装器。除兼容所有浏览器外，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() 。 当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定事件处理器. React内部自定义了一套事件系统，在这个系统上统一进行事件订阅和分发。 具体来讲，React利用事件委托机制在Document上统一监听DOM事件，再根据触发的target将事件分发到具体的组件实例。另外上面e是一个合成事件对象(SyntheticEvent), 而不是原始的DOM事件对象。 React事件系统实现可以分为两个阶段：事件注册、事件触发 ReactBrowserEventEmitter作为事件注册入口，担负着事件注册和事件触发。注册事件的回调函数由EventPluginHub来统一管理，根据事件的类型(type)和组件标识(_rootNodeID)为key唯一标识事件并进行存储。 其大致流程如下： 简单点的解释为： React不会将事件处理函数直接绑定到真实的节点上，而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器。这个监听器维持了一个映射，保存所有组件内部的事件监听和处理函数。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。 需要注意的是 关于合成事件 合成事件官方文档： https://react.html.cn/docs/events.html 合成事件作用 React事件和原生事件主要区别有: 合成事件优点： 站在巨人的肩膀上(参考资料) dom事件 React事件机制和未来 这个文章写得好！

作为Nike缓震革命的一部分，Nike React重新定义发泡材质和其他缓震系统的可能性——例如 Nike Air VaporMax和采用ZoomX发泡材质的Nike Zoom Vaporfly 4%——让每位运动员都可以选择适合自己的科技。 NIKE REACT 发泡材质可以很轻量，也可以有弹性。但是一般来说，发泡材质不能同时既轻量又有弹性，而且还有出色的耐久性。对于包括缓震专家和化学工程师在内的Nike创新团队来说，这个障碍正是其创新的动力，他们携手开发了一种同时兼具三种优势而非其中两种的发泡材质。这项成果便是Nike React，既是Nike缓震科技的再次创新，也是鞋类发泡材质材料的重要突破。 Nike React也是Nike善于内部制造及创新的实例。在数百次重复中，Nike对化学物质进行精细微调——使用科学方法往材料中加入新的属性。不妨联想一下蛋糕配方——Nike React的研发也从测试各类原材料开始，看哪种成分能够得出最好的结果。这一Nike专有的发泡材质可以完全掌控Nike React的特性和制造过程，也能够将这一创新成果运用到更多的运动员和运动项目中。 Nike React可以提供优秀的回弹 尽管Nike React拥有多项显而易见的性能优势，不过没有其他运动能像篮球一样流畅、有效地同时检视Nike React所具备的三项特质。篮球运动需要连续地变换方向和速度，或在转瞬之间完成起跳，而这些动作都在不断挑战球鞋的极限。Nike React这种材料让人感觉既松软有弹性，同时也柔软且稳定。 Nike React可以提供出色的能量回馈，随着比赛的进行，始终保持一致的脚感。 Nike React首先应用于Jordan Super.Fly 2017和Nike React Hyperdunk 2017，由Draymond Green初次穿着亮相。每双球鞋都含有一个全掌长度的内嵌Nike React核心。 两款篮球鞋的设计过程都有运动员资料作为支援——他们如何移动，如何变换方向，如何施力——均由Nike运动研究实验室提供。压力分布图将这些资料视觉化，准确地显示运动员需要支撑的部位，可以全面优化缓震性和抓地力。 作为Nike缓震革命的一部分，Nike React正在重新定义发泡材质和其他缓震系统的可能性——例如Nike Air VaporMax 和采用ZoomX发泡材质的Nike Zoom Vaporfly 4%——让每位运动员都可以选择适合自己的科技。 资料提供：NIKE 责任编辑：妞妞

数据流(redux)和状态维护、组件化提升可维护性、Diff减少DOM更新性能耗损……

React框架是起源于Facebook的项目，可以轻易的解决跨浏览器兼容的问题，主要是通过对DOM的模拟减少与DOM的交互做到的。React的模块化把组件进行了隔离，出现问题的时候更方便程序员对其进行修改，而且由于JavaScript，因此更有利于搜索引擎的优化。优点：引入了一个叫做虚拟DOM的概念，运行速度快；提供了标准化的API，解决了跨浏览器问题、兼容性更好；代码更加模块化，重用代码更容易，可维护性高。缺点：React是目标是UI组件，通常可以和其它框架组合使用，并不适合单独做一个完整的框架。关注优就业，学习更多IT知识。React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI，很多人认为React是MVC中的V（视图）。React起源于Facebook的内部项目，用来架设Instagram的网站，并于2013年5月开源。React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

组件化提供了一种抽象，将页面拆分成一个个独立可复用的小组件来构造应用，任何的应用都会被抽象成一颗组件树 1、根据组件的定义方式，可以分为:函数组件(Functional Component )和类组件(Class Component) 2、根据组件内部是否有状态需要维护，可以分成:无状态组件(Stateless Component )和有状态组件(Stateful Component) 3、根据组件的不同职责，可以分成:展示型组件(Presentational Component)和容器型组件(Container Component) 1、定义要求： 1）、组件的名称是大写字符开头 2）、类组件需要继承自 React.Component 3）、类组件必须实现render函数 2、相关属性 1）、constructor是可选的，通常在constructor中初始化一些数据。 2）、this.state中维护的就是组件内部的数据。 3）、render() 方法是 class 组件中唯一必须实现的方法。 3、函数式组件和类组件区别 1）、函数式组件没有this 2）、函数式组件没有内部状态 4、render返回值 1）、React 元素：通过 JSX 创建的元素 2）、数组或 fragments:使得 render 方法可以返回多个元素 3）、Portals:可以渲染子节点到不同的 DOM 子树中 4）、字符串或数值类型:它们在 DOM 中会被渲染为文本节点 5）、布尔类型或 null:什么都不渲染。 1、生命周期，可以分为多个阶段 1）、装载阶段(Mount)，组件第一次在DOM树中被渲染的过程 2）、更新过程(Update)，组件状态发生变化，重新更新渲染的过程 3）、卸载过程(Unmount)，组件从DOM树中被移除的过程 2、React生命周期函数 1）、componentDidMount：组件已经挂载到DOM上 2）、componentDidUpdate：组件已经发生了更新 3）、componentWillUnmount：组件即将被移除 1、Constructor constructor中通常只做两件事情: 1）、通过给 this.state 赋值对象来初始化内部的state 2）、为事件绑定实例(this) 如果都没有上述两件事，则不需实现构造函数 2、componentDidMount 在组件挂载后(插入 DOM 树中)立即调用 1）、执行依赖于DOM的相关操作 2）、在此处发送网络请求(官方建议) 3）、在此处添加一些订阅(会在componentWillUnmount取消订阅) 3、componentDidUpdate(prevProps, prevState, snapshot) 在更新后会被立即调用，首次渲染不会执行此方法。如果组件实现了 getSnapshotBeforeUpdate() ，第三个参数 “snapshot” 参数传递，否则此参数将为 undefined。 1）、组件更新后，可以在此处对 DOM 进行操作 2）、如果你对更新前后的 props 进行了比较，也可以选择在此处进行网 络请求;(例如，当 props 未发生变化时，则不会执行网络请求) 4、componentWillUnmount 会在组件卸载及销毁之前直接调用 1）、在此方法中执行必要的清理操作，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等

记录贴，根据遇到的问题记录解决方法，以便查阅。 启动react的时候，执行npm start出现： 解决方法：这可能是create-react-app有丢包的缺陷，手动安装包后，需要重新npm install一下，这样node_modules/.bin/目录下才会重新出现react-scripts的文件，这样npm start命令才能正常执行。 npm install 或 npm install react-scripts 在react中<tr>元素不可作为<table>元素的直接子元素。 解决方法：在<tr>和<table>直接加上<tbody>元素。 这个问题是在react的<Router></Router>标签中使用link出现的错误，如下： 解决方法：这个错误的原因是link标签写错了，应该写成<Link></Link>，L需要大写，这个Link是react-router中的。 写在最后：

反应的意思。react，英语单词，主要用作为动词，意为“反应，作出反应；产生（化学）反应”。短语搭配：react on v. 起作用于；对…有影响。react against 反抗；反对；起反作用。react双语例句：1、I nudged her but she didn"t react.我用胳膊肘捅了她一下，可她没有反应。2、There"s no knowing how he"ll react.很难预料他会有什么样的反应。3、Nations react strongly to unauthorized overflights.各国对于未授权的飞越领空反应强烈。

1、react，英语单词，主要用作为动词，意为“反应，作出反应；产生（化学）反应”。2、Inudgedherbutshedidntreact.我用胳膊肘捅了她一下，可她没有反应。3、Theresnoknowinghowhellreact.很难预料他会有什么样的反应。4、Nationsreactstronglytounauthorizedoverflights.各国对于未授权的飞越领空反应强烈。

1、react，英语单词，主要用作为动词，意为“反应，作出反应；产生（化学）反应”。 2、I nudged her but she didnt react.我用胳膊肘捅了她一下，可她没有反应。 3、Theres no knowing how hell react.很难预料他会有什么样的反应。 4、Nations react strongly to unauthorized overflights.各国对于未授权的飞越领空反应强烈。

意为“反应，作出反应；产生（化学）反应”。根据《柯林斯英汉双解大词典 》：V-I When you react to something that has happened to you, you behave in a particular way because of it. 作出反应V-I If you react against someone"s way of behaving, you deliberately behave in a different way because you do not like the way they behave. 反抗V-I If you react to a substance such as a drug, or to something you have touched, you are affected unpleasantly or made ill by it. (对药物或其他所碰触的东西等) 起不良反应V-RECIP When one chemical substance reacts with another, or when two chemical substances react, they combine chemically to form another substance. 起化学反应react on v. 起作用于；对…有影响react against 反抗；反对；起反作用I nudged her but she didn"t react.我用胳膊肘捅了她一下，可她没有反应。There"s no knowing how he"ll react.很难预料他会有什么样的反应。Nations react strongly to unauthorized overflights.各国对于未授权的飞越领空反应强烈。

　　react表示反应，作出反应; 影响的意思，那么你知道react 短语 有哪些吗?接下来我为大家整理了react短语搭配，希望对你有帮助哦! 　　react的短语 　　react by(v.+prep.) 　　以u2026方式作出反应 act in reply by (usually doing sth) 　　If you touch a hedgehog, it will react by curling into a ball.如果你触摸刺猬,它会以蜷成球状作出反应。 　　react against(v.+prep.) 　　反对; 反抗 feel and usually express opposition as a result of meeting (sth such as an idea) 　　He reacted against my suggestion.他反对我的建议。 　　react on〔upon〕(v.+prep.) 　　对u2026起作用〔有影响〕 have an effect on (sth); influence (sb) 　　How do acids react on metals?酸对金属会起什么样的化学反应? 　　react to(v.+prep.) 　　对u2026作出反应〔评价〕 feel and express the effect of; judge (sth/sb) 　　A dog reacts to kindness by wagging its tail.狗摇尾巴以报答人们的爱护。 　　The eye reacts to the light.眼睛会对光作出反应。 　　react with(v.+prep.) 　　与u2026反应 make a reaction with (sth) 　　The water was reacting with the ferrous iron in the tank.水与水箱中的铁质产生化学反应。 　　react的网络释义 　　react 　　反应; 反应，应答，起作用; 起反应; (叄与化学)反应; 　　react to 　　对u2026作出反应; 对u2026起反应; 反应，反对; 起反应; 　　react - 　　反应,反对; 　　react with 　　与...起化学反应; 与...反应; 　　chain react 　　发生连锁反应; 　　react的短语例句 　　1. There"dbe no telling how John would react to such news as this. 　　还不知道约翰听到这样的消息会作何反应。 　　2. I don"t react anymore when opponents try to niggle me. 　　对手找茬惹我时，我不会再理他们。 　　3. Someone allergic to milk is likely to react to cheese. 　　对牛奶过敏的人可能对奶酪也有不良反应。 　　4. Peonies react badly to being moved and are best left undisturbed. 　　牡丹花不宜挪移，最好别去动它。 　　5. "How did he react?" — "Very calmly." 　　“他有什么反应?”——“非常平静。” 　　6. They"ll react aggressively. 　　他们会作出挑衅性的反应。 　　7. Nations react strongly to unauthorized overflights. 　　各国对未经授权的飞越领空行为都会作出激烈反应。 　　8. Congress is waiting to see how the Oval Office will react. 　　国会正观望总统方面的反应。 　　9. The police must be able to react swiftly in an emergency. 　　警方在面对紧急情况时必须能迅速作出反应. 　　10. She didn"t look up or react in any way. 　　她既不抬头,也没有任何反应. 　　11. When the sun comes out, the flowers react by opening. 　　当太阳出来的时候, 花以张开的形式作出反应. 　　12. By gravitation the sun and planets act and react upon one another. 　　太阳与行星通过引力发挥作用并相互影响. 　　13. How did he react to your suggestion? 　　他如何对待你的建议? 　　14. How do acids react on metals? 　　酸对金属会起什么样的化学反应? 　　15. Primitive humans needed to be able to react like this to escape from dangerous animals. 　　原始人必须要能作出这样的反应以逃避危险的动物。 猜你喜欢： 1. react的第三人称单数 2. praise的短语有哪些 3. travel的同义词是什么 4. spend的同义词是什么 5. walk的同义词是什么 6. absorb短语搭配 7. run的短语有哪些

1、react，英语单词，主要用作为动词，意为“反应，作出反应；产生（化学）反应”。2、I nudged her but she didnt react.我用胳膊肘捅了她一下，可她没有反应。3、Theres no knowing how hell react.很难预料他会有什么样的反应。4、Nations react strongly to unauthorized overflights.各国对于未授权的飞越领空反应强烈。

1、react，英语单词，主要用作为动词，意为“反应，作出反应；产生（化学）反应”。2、Inudgedherbutshedidntreact.我用胳膊肘捅了她一下，可她没有反应。3、Theresnoknowinghowhellreact.很难预料他会有什么样的反应。4、Nationsreactstronglytounauthorizedoverflights.各国对于未授权的飞越领空反应强烈。

用reactjs构建一个完整的前端页面的步骤：准备：React 的安装包，建议去安装1、使用 React 的网页源码，结构大致如下：<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> // **用户代码 ** </script> </body></html>上面代码有两个地方需要注意。首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Browser.js 的作用是将 JSX 语法转为 JavaScript 语法，这一步很消耗时间，实际上线的时候，应该将它放到服务器完成。2、将 src 子目录的 js 文件进行语法转换，转码后的文件全部放在 build 子目录。$ babel src --out-dir build3、渲染转换成html节点，以方便操作dom：ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。这里以插入hello world为例来说明ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById("example"));4、运行结果。

vue是国内开发的，一般够用了。可以weixin交流：musicabin

react按照以下步骤获取当前的环境模式。1、运行脚本npmruneject把webpack配置解封出来。2、在scripts目录下找到分别对应开发、测试、生产环境的构建文件。3、在项目逻辑中console.log。4、添加自定义的根据环境变化的内容。5、在项目中拿到环境值。

bootstrap 是个前端框架分为css和js两部分。主要是一些responsive的程序设计还有提示框和一些图标等等属于基本插件。Angular 和 react 是两种基于mvc（model view control ）或mvp（model view presenter） 框架的前端框架更主要的是完成单一页面网页（SPA）。React 偏向于P（presenter） Angular 偏向于V（view），更多的是区分在如何实现SPA，而且react可以和angular共同使用。

1、React的return中如果使用多个标签必须放在一个div中，否则浏览器无法解析 记得加{},经常忘 2、ReactComponentWithPureRenderMixin报错，原因是antd没装好 3、JS报错 Uncaught TypeError: Cannot read property "extend" of undefined 原因：在business.html中引用css未生效，在main.css中引用生效，so strange 4、"Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings." 原因：render()中的注释导致，删除注释即可 5、state树更新失败:乱用antd中的分页，导致数据显示错误 6、有更新的变量写在render内部，否则每次刷新会将新数据存入state中，弄了一天，感谢奔哥~

最近准备自己造一套轮子，技术栈暂定为react+typescript。在react引入ts的时候还是遇到了一些坑，所以写篇文章记录一下引入的过程。 引入ts么，就要先选择一个ts的解析工具，这里我根据文档选了awesome-typescript-loader，所以在webpack.config.js里加 然后配置ts.config.js文件，在配置的时候，我加了这样一个选项 然后在yarn test的时候出现了一些bug，引入react必须import * as React from "react"这么引， 否则就出错，报错如下 必须把它改成 所以ts.config.js配置应如下 另外，我需要再引入一下tslint，所以还要配置一个 tslint 配置完成，下一节我会讲react里怎么使用ts。

首先使用react native编写一个简单的应用，在碰到问题的时候，肯定需要对代码进行调试。目前react native支持在Chrome浏览器内进行调试。需要选择Scheme->Run的选项为Debug,否则模拟器中不会出现调试选项。 将应用设置为在模拟器中运行，运行后

react-router-dom 是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中： 使用路由时需要为组件指定一个路由的 path ，最终会以 path 为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较简单就是两个 Tab 页面的来回切换。 最终交互时，上述路由配置会出现彼此覆盖的情况，如下图： 为了保证 App 组件，不会在 Tab1 和 Tab2 切换时被覆盖需要使用嵌套路由。 嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此 React 提供了 Outlet 组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。 Outlet 渲染一个子路由的元素 最终效果如下图： 通过 path="*" ,实现没有其他路由匹配时，对其进行匹配。 效果如图： 通过路由传递参数到组件中 最终效果： 当我们切换至 Tab1 再切回 Tab2 后，笔记详情页面将空白，效果如下： 可以通过索引路由填补空白，具体只需： 如此当我们重复上述操作时便会呈现如下效果： 当父路由匹配，但其他子路由都不匹配时，由索引路由匹配。索引路由是父路由的默认子路由。 当用户尚未单击导航列表中的一项时，会呈现索引路由。 与 Link 功能一致，差异是可以设置点击后的颜色 搜索参数类似于 URL 参数，形如 /login?success=1 随着我们输入 apple , 路由的地址将变为 /Tab2?text=apple 触发路由重新呈现。 当我们在输入框输入字符时，便会触发列表的过滤显示： 上述UI在交互过程中，当我们点击 Tab1 和 Tab2 进行切换时，或者点击 apple 或 appet 时，会出现输入框被清空，且列表不再被过滤的问题。 react-router 提供了 useLocation 方法，它返回浏览器显示的 url 信息。通过它可以获取浏览器 url 中的搜索参数，从而进行暂存，在具体组件内，可以通过 useSearchParams 获取到暂存的值。具体方式，通过自定义组件包装 NavLink 或 Link 来实现。 上述示例中，路由的切换采用 Link 或者 NavLink ，但当我们的页面元素不使用 Link 时，比如使用 Button ，此时便需要使用采用 useNavigate 。同上可以配合 useLocation 保存搜索字段。 https://reactrouter.com/docs/en/v6/getting-started/tutorial

react生命周期是一个组件从生到死的一个过程，react为生命周期提供了一些关键节点，即会被触发的事件，来让组件方便处理各种场景。生命周期可以分为三种状态：Mounting实际的 、DOMUpdating插入了正在重新渲染、 Unmounting实际DOM已删除。使用生命周期的方法有：1、componentWillMount在渲染之前调用，在客户端也是如此。2、componentDidMount：第一次呈现之后调用，仅在客户端。后面的组件已经生成了相应的 DOM结构，可以通过this.ge tDOMNode ()访问。3、ComponentWillReceiveProps在组件收到新的 prop (Update)时调用。初始化 render时不调用此方法。

情况一：constructor(props) { super(props); this.login = this.login.bind(this);}login(a,b,c) { console.log(this);//打印这个组件本身console.log(a);//打印111111console.log(b);//undefinedconsole.log(c);//undefined}<button onClick={()=>{this.login(111111)}} />情况二：constructor(props) { super(props); this.login = this.login.bind(this);}login(a,b,c) { console.log(this);//打印这个组件本身console.log(a);//打印Proxy对象：Proxy里面可以获得dom元素console.log(b);//打印eventconsole.log(c);//undefined}<button onClick={this.login} />情况三：constructor(props) { super(props); // this.login = this.login.bind(this);}login(a,b,c) { console.log(this);//打印这个组件本身，说明我们用箭头函数的时候，不需要bind(this),react自动把this指向了组件自己，console.log(a);//打印出了111111console.log(b);//undefinedconsole.log(c);//undefined}<button onClick={()=>{this.login(111111)}} />情况四：constructor(props) { super(props); // this.login = this.login.bind(this);}login(a,b,c) { console.log(this);//打印null,这是react最常见的坑，this本来指向window，但是经过react初始化之后，指向了null;console.log(a);//打印Proxy对象：Proxy里面可以获得dom元素console.log(b);//打印eventconsole.log(c);}<button onClick={this.login} />情况五：constructor(props) { super(props); // this.login = this.login.bind(this);}login(a,b,c) { console.log(this);//打印这个组件本身console.log(a);//undefinedconsole.log(b);//undefinedconsole.log(c);//undefined}<button onClick={()=>{this.login()}} />情况六：(可以算作es5的最佳实践，用的es5的方法，拿到所有参数)constructor(props) { super(props); // this.login = this.login.bind(this);this.login=(a,b,c)=>{ console.log(this);//打印这个组件本身console.log(a);//111111console.log(b);//打印Proxy对象：Proxy里面可以获得dom元素console.log(c);//打印event：}}<button onClick={this.login.bind(this,111111)} />最佳实践：(for es6) 老版本constructor(props) { super(props); // this.login = this.login.bind(this);}login(type,event,proxy) { console.log(this);//打印这个组件本身console.log(event);//打印event：console.log(proxy);//打印Proxy对象,event详情请查验es6}<button onClick={()=>{let target=this, handler={};this.login("boss",event,new Proxy(target, handler))}}/>最佳实践：2018（需要传参）constructor(props) { super(props);}login=(num, evt)=>{ console.log(num);//打印传参console.log(evt);//打印event：}<button onChange={this.login.bind(null, 111)}/>最佳实践：2018（不需要传参）constructor(props) { super(props);}login=( evt)=>{ console.log(evt);//打印event：}<button onChange={this.login}/>

React是划时代的开发工具。 更彻底的组件化 组件化意味着： 单向数据流 在React中，你操作的是数据。React根据你的数据变动来渲染出新的内容。数据就是数据，渲染就是渲染。避免了MVC中view部分又去直接修改model。具体实现运用了Redux、纯函数、高阶组件。 虚拟DOM 对于三大框架 React、Angular和Vue这不算很稀奇的事情。只是对比jQuery有优势。 颠覆传统的前端开发 意味着开发者要学习一些新的开发范式。比如传统前端遵循html/css/js分离，而React因为组件化，所以都使用JSX把html写在了JavaScript中。Vue号称自己的侵入性比 React 和 Angular 小，而且仍然保留 html/css/js 分离，且可以使用 ES5 语法（不强制使用ES6）。 学习曲线陡峭 React自带的JSX、ES6语法、组件化、单向数据流、Redux、jest/enzyme测试。 关于框架的选择，仍然是那句话：萝卜白菜各有所爱，适合自己的就是最好的。然而前端正在进行一场革命，从2015年/2016年来看特别明显。React可能不是这场前端革命的终点（也许三大框架都不是），但是React带来的新的开发思路，值得去了解。

React是一种JavaScript库，专注于构建用户界面。在React中，数据类型可以通过JavaScript定义，它支持所有原生的JavaScript数据类型，如string、number、boolean、null和undefined。此外，React还引入了一些内置的数据类型，如ReactElement和ReactNode。ReactElement是一个轻量级的描述组件的JavaScript对象，ReactNode表示React组件的子代，可以是ReactElement、string、number或其他ReactNode。React还提供了propTypes来验证组件的props属性类型，以确保组件获取正确的数据类型。这些数据类型的灵活性和多样性使得React编程更加直观和方便。

　　在Redux 应用中使用路由功能，可以搭配使用 React Router 来实现。 Redux 和 React Router 将分别成为数据和 URL 的事实来源（the source of truth）。 在大多数情况下， 最好将他们分开，除非需要时光旅行和回放 action 来触发 URL 改变。1、需要从 React Router 中导入 <Router /> 和 <Route />。代码如下：import { Router, Route, browserHistory } from "react-router";在 React 应用中，通常需要会用 <Router /> 包裹 <Route />。 如此，当 URL 变化的时候，<Router /> 将会匹配到指定的路由，然后渲染路由绑定的组件。 <Route /> 用来显式地把路由映射到应用的组件结构上。 用 path 指定 URL，用 component 指定路由命中 URL 后需要渲染的那个组件。const Root = () => ( <Router> <Route path="/" component={App} /> </Router> );另外，在 Redux 应用中，仍将使用 <Provider />。 <Provider /> 是由 React Redux 提供的高阶组件，用来让开发者将 Redux 绑定到 React 。然后，开发者从 React Redux 导入 <Provider />：import { Provider } from "react-redux";开发者将用 <Provider /> 包裹 <Router />，以便于路由处理器可以访问 store。const Root = ({ store }) => ( <Provider store={store}> <Router> <Route path="/" component={App} /> </Router> </Provider>);2、渲染组件现在，如果 URL 匹配到 "/"，将会渲染 <App /> 组件。此外，开发者将在 "/" 后面增加参数 (:filter), 当尝试从 URL 中读取参数 (:filter)，需要以下代码：<Route path="/(:filter)" component={App} />也可以将 "#" 从 URL 中移除（例如：http://localhost:3000/#/?_k=4sbb0i）。 开发者需要从 React Router 导入 browserHistory 来实现：import { Router, Route, browserHistory } from "react-router";然后将它传给 <Router /> 来移除 URL 中的 "#"：<Router history={browserHistory}> <Route path="/(:filter)" component={App} /></Router>只要开发者不需要兼容古老的浏览器，比如IE9，你都可以使用 browserHistory。components/Root.jsimport React, { PropTypes } from "react";import { Provider } from "react-redux";import { Router, Route, browserHistory } from "react-router";import App from "./App";const Root = ({ store }) => ( <Provider store={store}> <Router history={browserHistory}> <Route path="/(:filter)" component={App} /> </Router> </Provider>);Root.propTypes = { store: PropTypes.object.isRequired,};export default Root;

说说React一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：－ 通过前端模板引擎定义结构－ JS文件中写自己的逻辑－ CSS中写组件的样式－ 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖，那么在React中是什么样子呢？结构和逻辑在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。结构在JSX文件中，可以直接通过 React.createClass 来定义组件：var CustomComponent = React.creatClass({render: function(){return (<div className="custom-component"></div>);}});通过这种方式可以很方便的定义一个组件，组件的结构定义在render函数中，但这并不是简单的模板引擎，我们可以通过js方便、直观的操控组件结构，比如我想给组件增加几个节点：var CustomComponent = React.creatClass({render: function(){var $nodes = ["h","e","l","l","o"].map(function(str){return (<span>{str}</span>);});return (<div className="custom-component">{$nodes}</div>);}});通过这种方式，React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢？逻辑写过前端组件的人都知道，组件通常首先需要相应自身DOM事件，做一些处理。必要时候还需要暴露一些外部接口，那么React组件要怎么做到这两点呢？事件响应比如我有个按钮组件，点击之后需要做一些处理逻辑，那么React组件大致上长这样：var ButtonComponent = React.createClass({render: function(){return (<button>屠龙宝刀，点击就送</button>);}});点击按钮应当触发相应地逻辑，一种比较直观的方式就是给button绑定一个 onclick 事件，里面就是需要执行的逻辑了：function getDragonKillingSword() {//送宝刀}var ButtonComponent = React.createClass({render: function(){return (<button onclick="getDragonKillingSword()">屠龙宝刀，点击就送</button>);}});但事实上 getDragonKillingSword() 的逻辑属于组件内部行为，显然应当包装在组件内部，于是在React中就可以这么写：var ButtonComponent = React.createClass({getDragonKillingSword: function(){//送宝刀},render: function(){return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);}});这样就实现内部事件的响应了，那如果需要暴露接口怎么办呢？暴露接口事实上现在 getDragonKillingSword 已经是一个接口了，如果有一个父组件，想要调用这个接口怎么办呢？父组件大概长这样：var ImDaddyComponent = React.createClass({render: function(){return (<div>//其他组件<ButtonComponent />//其他组件</div>);}});那么如果想手动调用组件的方法，首先在ButtonComponent上设置一个 ref="" 属性来标记一下，比如这里把子组件设置成 <ButtonComponent ref="getSwordButton"/> ，那么在父组件的逻辑里，就可以在父组件自己的方法中通过这种方式来调用接口方法：this.refs.getSwordButton.getDragonKillingSword();看起来屌屌哒~那么问题又来了，父组件希望自己能够按钮点击时调用的方法，那该怎么办呢？配置参数父组件可以直接将需要执行的函数传递给子组件：<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>然后在子组件中调用父组件方法：var ButtonComponent = React.createClass({render: function(){return (<button onClick={this.props.clickCallback}>屠龙宝刀，点击就送</button>);}});子组件通过 this.props 能够获取在父组件创建子组件时传入的任何参数，因此 this.props 也常被当做配置参数来使用屠龙宝刀每个人只能领取一把，按钮点击一下就应该灰掉，应当在子组件中增加一个是否点击过的状态，这又应当处理呢？组件状态在React中，每个组件都有自己的状态，可以在自身的方法中通过 this.state 取到，而初始状态则通过 getInitialState() 方法来定义，比如这个屠龙宝刀按钮组件，它的初始状态应该是没有点击过，所以 getInitialState 方法里面应当定义初始状态 clicked: false 。而在点击执行的方法中，应当修改这个状态值为 click: true ：var ButtonComponent = React.createClass({getInitialState: function(){//确定初始状态return {clicked: false};},getDragonKillingSword: function(){//送宝刀//修改点击状态this.setState({clicked: true});},render: function(){return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);}});这样点击状态的维护就完成了，那么render函数中也应当根据状态来维护节点的样式，比如这里将按钮设置为 disabled ，那么render函数就要添加相应的判断逻辑：render: function(){var clicked = this.state.clicked;if(clicked)return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);elsereturn (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>);}小节这里简单介绍了通过JSX来管理组件的结构和逻辑，事实上React给组件还定义了很多方法，以及组件自身的生命周期，这些都使得组件的逻辑处理更加强大资源加载CSS文件定义了组件的样式，现在的模块加载器通常都能够加载CSS文件，如果不能一般也提供了相应的插件。事实上CSS、图片可以看做是一种资源，因为加载过来后一般不需要做什么处理。React对这一方面并没有做特别的处理，虽然它提供了Inline Style的方式把CSS写在JSX里面，但估计没有多少人会去尝试，毕竟现在CSS样式已经不再只是简单的CSS文件了，通常都会去用Less、Sass等预处理，然后再用像postcss、myth、autoprefixer、cssmin等等后处理。资源加载一般也就简单粗暴地使用模块加载器完成了组件依赖组件依赖的处理一般分为两个部分：组件加载和组件使用组件加载React没有提供相关的组件加载方法，依旧需要通过 <script> 标签引入，或者使用模块加载器加载组件的JSX和资源文件。组件使用如果细心，就会发现其实之前已经有使用的例子了，要想在一个组件中使用另外一个组件，比如在 ParentComponent 中使用 ChildComponent ，就只需要在 ParentComponent 的 render() 方法中写上 <ChildComponent /> 就行了，必要的时候还可以传些参数。疑问到这里就会发现一个问题，React除了只处理了结构和逻辑，资源也不管，依赖也不管。是的，React将近两万行代码，连个模块加载器都没有提供，更与Angularjs，jQuery等不同的是，他还不带啥脚手架…没有Ajax库，没有Promise库，要啥啥没有…虚拟DOM那它为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升

react是一个框架，jQuery是一个类库，这两个功能上基本没有重叠的地方。

这周开始学习React的生命周期。 React的生命周期从广义上分为三个阶段：挂载、渲染、卸载 因此可以把React的生命周期分为两类：挂载卸载过程和更新过程。 React的生命周期图: constructor()中完成了React数据的初始化，它接受两个参数：props和context，当想在函数内部使用这两个参数时，需使用super()传入这两个参数。 注意：只要使用了constructor()就必须写super(),否则会导致this指向错误。 componentWillMount()一般用的比较少，它更多的是在服务端渲染时使用。它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染DOM时。 组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染 在此处完成组件的卸载和数据的销毁。 原因：因为你在组件中的ajax请求返回setState,而你组件销毁的时候，请求还未完成，因此会报warning 解决方法： shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState。 组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。 render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。 代替componentWillReceiveProps()。 老版本中的componentWillReceiveProps()方法判断前后两个 props 是否相同，如果不同再将新的 props 更新到相应的 state 上去。这样做一来会破坏 state 数据的单一数据源，导致组件状态变得不可预测，另一方面也会增加组件的重绘次数。 举个例子: 这两者最大的不同就是: 在 componentWillReceiveProps 中，我们一般会做以下两件事，一是根据 props 来更新 state，二是触发一些回调，如动画或页面跳转等。 代替componentWillUpdate。 常见的 componentWillUpdate 的用例是在组件更新前，读取当前某个 DOM 元素的状态，并在 componentDidUpdate 中进行相应的处理。 这两者的区别在于：

ReactAdmin是一个Github上免费开源的前端框架（不是组件库，也不是模板，它是一个框架），采用es6、React和Material Design构建基于Rest/GraphQl API的Web应用程序。在React上star数超过8k。https://github.com/marmelab/react-admin ReactAdmin不是个UI组件库，它是一个前端框架，因此你基本上基本上只要按照官网的文档进行一些配置等然后在其基础上开发自己的应用程序即可，可谓开箱即用，意识就是都给你集成好了。 你可以直接使用以下命令进行安装（这是安装react-admin及所有的依赖） 下面我们看一下官网提供的一个最简单的示例，你可以在它的主仓库中获取我们进入到simple中，大致看一下代码和目录结构我们安装一些依赖然后启动 成功后打开浏览器，这是使用react-admin最简单的一个例子一图了解由于ReactAdmin是一个非常复杂的框架，你可以参考提供的文档，我这里就不详细介绍了，感兴趣的可以直接看文档，文档是英文的，所有的说明都在文档中。 https://marmelab.com/react-admin/ReactAdmin它是一个集合，它将一些前端开发所需要的东西都集成了进来，然后做好，我们直接使用即可，不仅仅适合个人学习，也适合通过它来构建企业级的应用。我们不仅仅是拿过来直接用，我们可看一看别人是怎么实现这样的一个框架的，从源码去学习会更快的提升自己的水平，希望对你有所帮助！

react和vue的区别如下：1、数据驱动视图在jquery时代，我们需要频繁的操作DOM来实现页面效果与交互；而Vue和React 解决了这一痛点，采用数据驱动视图方式，隐藏操作DOM的频繁操作。所以我们在开发时，只需要关注数据变化即可，但是二者实现方式不尽相同。2、组件化React与Vue都遵循组件化思想，它们把注意力放在UI层，将页面分成一些细块，这些块就是组件，组件之间的组合嵌套就形成最后的网页界面。所以在开发时都有相同的套路，比如都有父子组件传递， 都有数据状态管理、前端路由、插槽等。3、Virtual DOMVue与React都使用了 Virtual DOM + Diff算法，不管是Vue的Template模板+options api写法， 还是React的Class或者Function写法,最后都是生成render函数，而render函数执行返回VNode（虚拟DOM的数据结构，本质上是棵树）。

react岗位少的原因是不是所有公司都使用React。React需要结合其他技术。1、不是所有公司都使用React：虽然React在前端开发领域非常流行，但是并不是所有的公司都使用React来构建Web应用程序。有些公司可能更倾向于使用其他框架或库，如Angular、Vue.js等。2、不是所有公司都使用React：React的生态系统在不断变化，随着React的不断发展和更新，React的相关技术也在不断更新和变化。这使得开发者需要不断学习、适应和更新自己的技能，否则他们可能会落后于最新的技术进展。3、React需要结合其他技术：React通常需要结合其他技术（如Redux、Webpack等）来构建完整的Web应用程序，这意味着开发者需要掌握更多的技术，而这可能加大了他们的学习和开发成本。

react安装组件命令全局安装create-react-app，执行：npminstall-gcreate-react-app命令进行安装。进入要安装项目的文件夹，执行：npxcreate-react-appreact-blog创建一个react-blog项目。进入项目cdreact-blog，执行：npmrunstart编译启动项目即可此页面会自动开启。在项目src目录创建views文件夹，放置页面组件，这里创建了login和main两个文件夹并创建了对应的。