React 中如何使用第三方类库
01:18:53 +08:00 · 6432 次点击
最近都在学习 react,但在学习过程中发现 React 的确有些坑的地方.尤其在第三方类库方面,由于 React 中的 jsx 不能对父级 DOM 修改进行修改,这个可能会影响到第三方类库的集成.
感觉不单单是不能对父级 DOM 修改的原因,还有因为其在初始化时渲染过程中仅对当前节点的 DOM 进行操作,可想而知如要面对需要修改父级节点时会很困难(尤其是像 WebEditor 这种类库),而且目前对于 React 的 WebEditor 好像也没有.
相对 AngularJS,虽然也要对某些类库进行 Directive 转换,但比 React 应该会容易转换些,不知道 大家对这个有什么看法呢?
已经研究好了几天了,感觉 React 要是做单页应用的确有难度(可能我用得不多,还要挖掘 React 的实用性).
但 React 组件化的想法的确是好的,但要切换过来的确要蛮费劲的.
17 回复 &| &直到
11:58:46 +08:00
& & 04:51:25 +08:00
建议看看这个
& & 08:11:39 +08:00
楼主可能还没熟悉 React 的思维模式。
React 中的 Component 嵌套就像建筑工地盖楼时一个个包工头层层分包。
小包工头只负责自己的这一块，不能擅自去动上级的东西。
但是他可以和上级沟通（通过上级传过来的回调），让上级进行一些调整，方便自己继续干活。
不过这在层级很多的时候会比较麻烦， 5 级承包商要和 1 级承包商联系，就得有一个回调从 1 级一直传下来。这时可以考虑用一个独立的组件，例如 Flux ，作为它们沟通的渠道。
就相当于这个工地的总负责人，单独安排了一个联络员，专门在各级承包商之间跑来跑去传递信息。
& & 08:16:38 +08:00
不过我用 React 时间也不长，不知道理解的对不对，哈哈
& & 08:40:48 +08:00
先給楼主编辑器的答案：
react 本身的概念不多，但是配合 redux 就有几个重要的概念可以理解一下，其实就是后端单一数据库＋模版渲染的概念集合：
1. 单一数据源，不是说子元素改父元素，而是所有的都只能把数据放一个数据源，所有的都是更改那个数据源，类似后端的 db 的概念。
2. 永远从上到下渲染，就是子元素的状态，如果不是过程状态，永远从上到下，比如拖拽中的数据可以不用反馈，但是拖拽结果数据一定从上到下。
3.
higher-order React component 负责逻辑和数据处理，普通的 component 只负责渲染。官方的 react-reply 的集成就是用的这个概念。
4. @ 说的基本上是对的，上级一般是 higher-order React component ， redux 那边又叫做 container component ，是一个虚拟状态的 dom ，本身可以不用产生任何的真实 dom 。
5. 传递过程当中下级用到上级的回调，可以采用 context 来传递，具体的据说还没定下来，但是官方已经有文档了
& & 08:42:08 +08:00
另外不可变数据集在 react 里面有重要的作用，简化 diff 流程。
& & 10:47:24 +08:00
楼上这些回答和楼主的问题没啥关系啊，没错有很多类库就是很难用在 React 里。不过现在 React 的第三方组件也在慢慢丰富起来，到够用的程度应该不需要太久。
& & 10:52:06 +08:00
@ ....简单直接粗暴我喜欢
& & 10:56:45 +08:00
我大概清楚了。你想在一个模块内使用第三方的代码。第三方的代码是强 dom 控制的，没发使用 react 的 vdom 。那么就是需要自己写一个 reactClass 来封装一下。在这个 class 做特殊生命周期处理做适配。
首先 componentDidMount 和 componentWillUnmount 做这个第三方代码的 初始化 和 析构 工作，当然 html 还是写在 render 里面。
然后把 shouldComponentUpdate 直接 return false,
使得改变 props 和 states 时不会自行更新 dom 。但是一旦这么设置你就不能监听 props 和 states 改变了。所以需要自行在 componentWillUpdate 和 componentDidUpdate 里面实现。
但是 shouldComponentUpdate 并不能拦住全部，文档说了， This method is not called for the initial render or when forceUpdate is used. 所以以防万一谁 forceUpdate ，所以认为一旦 update 就直接这个模块析构再初始化
componentWillUpdate: function() { this.componentWillUnmount(); }
componentDidUpdate: function() { this.componentDidMount(); }
不知道你能不能看懂, 朱一的语文不是很好。但是应该能看懂吧....
总结就是。这个模块不能通过 react 内部逻辑去改变 dom 。所以把所有手段都劫持调，自己实现。
& & 10:56:51 +08:00
vuejs 作者曾经谈到过这个问题：
&Another issue with React is that because DOM updates are completely delegated to the Virtual DOM, it ’ s a bit tricky when you actually want to control the DOM yourself (although theoretically you can, you ’ d be essentially working against the library when you do that). For applications that needs ad-hoc custom DOM manipulations, especially animations with complex timing requirements, this can become a pretty annoying restriction. &
简单来说，可直接操作 DOM 的只有 React Virtual Dom 管理器，其它库的操作都必须经过它代理，所以才有 React-Bootstrap 这种东西存在的必要，看
里面，全是拼接胶水。
想直接用第三方库，可以选择 vuejs 这类不用 virtual dom 的， reactjs 革命性强，得自己移植适配
& & 11:06:53 +08:00
这个也大概明白,现在在找些例子验证一下
但像 baidu 地图这类 js 要接入 react 的确有难度
& & 11:10:59 +08:00
撸个伪代码大概这样
React.createClass({
getDefaultProps: function() {
onSelectedStyleStateChange: function () {},
contentText: ''
componentDidMount: function () {
this.states.editor = new RichEditor( React.findDOMNode(this) );
this.states.editor.on('select', onSelectedStyleStateChange);
this.states.editor.addContent(this.props.contentText);
componentWillUnmount: function() {
this.states.editor.destroy();
componentWillUpdate: function () {
componentWillUpdate: function() {
this.componentWillUnmount();
componentDidUpdate: function() {
this.componentDidMount();
render: function () {
return &div className=&editview&&&/div&
& & 11:11:46 +08:00
@ 你可以试试。反正折腾么... 233333
& & 11:14:50 +08:00
@ 对了像 componentWillUpdate 这类要 render 的方法,是不是得要更新 State 才会激发?
& & 11:22:35 +08:00
react 内部其实 调 render 只有 初始化的时候、调用 setState 的时候、外面更新 props 或者直接调用 forceUpdate 。调用 render 方法会返回目前的 vdom ，然后 react 比较现在和之前的 vdom 的差异，然后更新 dom 。
调用 setState 的时候、外面更新 props 时会通过 shouldComponentUpdate,
componentWillReceiveProps componentWillReceiveProps 的方法给你中间介入的手段 ...
& & 11:32:01 +08:00
@ 那要是我需要更新 dom 是,是不是直接用 forceUpdate?但这个方法的的勾会激发哪些方法? 这个好像在文档 没有明显提及... 是不是需要从源代码上分析?
& & 11:50:08 +08:00
@ 如果你是用第三方代码。不是 vdom 的。就要不要用 react 内部的方式去更新 dom 。因为会导致第三方操作 dom 的时候 dom 被 react 删掉导致悲剧。
文档还是挺清楚的。但是都在边边角角些的。如果你要知道内部逻辑就只能看源码了。
但是基本就是下面的逻辑(如果说的不对。大大纠正)。
createElement -& componentWillMount -& render -& 生成 html -& innerHTML 填充 -& componentDidMount
props 变更 -& componentWillReceiveProps -&
shouldComponentUpdate -& render -& diff(内部) -& change dom
setState -& shouldComponentUpdate -& render -& diff(内部) -& change dom
forceUpdate -& render -& diff(内部) -& change dom
& & 11:58:46 +08:00
@ 有 朱大大的详细解释就更加清楚了,谢谢朱大大
目前感觉用 React 还不是很上手,看来还是要做些 sideproject
因为之前都是以 angularjs 的方式来思想怎样用 React
导致 在学习 React 过程中,都带着后台应用程序的控件(如列表,CURD,地图显示等)来思考虑怎样做...
& · & 880 人在线 & 最高记录 3541 & · &
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.0 · 52ms · UTC 18:05 · PVG 02:05 · LAX 11:05 · JFK 14:05? Do have faith in what you're doing.基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用
发表于 19:42|
来源medium|
作者Tim Ermilov
摘要：如何基于ES6，使用React构建一个新JavaScript应用？如何将ES6代码发布到NPM上？又如何在后续项目中使用这些代码？……本文通过具体的编程实践，一一揭晓。
【编者按】本文为《》的简译内容，讲述了作者基于ES6，使用React、Webpack、Babel构建模块化JavaScript应用的编程心得。如果你想用React构建一个新的JavaScript应用，而且你还想实践ES6语法中的新特性，此外，你甚至想创建一些可重用组件并发布到NPM上，那么你究竟应该怎样实现这些需求？你如何将ES6代码发布到NPM，又如何在后续的项目中使用这些代码？我花了一些时间解决上面这些问题，现在我愿意与你们分享我习得的新知识。
如果你真的不希望阅读所有的细节，只想看看代码最终的效果——可以直接阅读最后一部分。
我们先来搞清楚我们到底想要得到什么，应该如何去实现。
我们的主要目标是：基于ES6，使用我们自定义的React组件创建一个React应用。其中最棘手的部分是自定义React组件。以下是实现这些目标的需求列表：
自定义组件应该使用ES6编写；
自定义组件应该完全自给自足（使用方法足够简单：安装，导入，渲染）；
自定义组件应该提供自身所需的样式（参考第2条，自给自足）；
自定义组件应该通过安装（因为）；
最后——所有自定义组件应该有单元测试和代码覆盖率报告；
加分项——自定义组件不应该相互依赖，但是应该能够相互影响。
此外，我们需要一些很棒的调试工具，例如：代码检查、源码映射（因为代码需要编译，所以这是调试的必要工具）。
现在我们已了解所有需求，可以开始寻找满足这些需求的方法。所以，首先需要选定我们将使用的工具集和相关库。
我们要基于ES6开发应用，目前的，所以我们需要将ES6编译为ES5。同时我们希望通过NPM管理自定义组件，需要选用一个兼容CommonJS的工具集。
目前有两种流行的可用选择——和。二者都满足我们的大部分需求，考虑到我们的项目需要使用样式文件，而Webpack对非JavaScript文件（例如：样式文件、图片、字体文件）非常友好，所以最终我们将选用Webpack。
Webpack已经能够满足大部分需求，我们将在此基础上加入，帮助我们完成更多任务（例如：单元测试、代码覆盖率检测、静态资源伺服）。
现在我们已经知道如何使用Webpack和Gulp.js来构建代码，可是如何才能满足我们的第一个需求——使用ES6？我们可以使用转译器，帮助我们将ES6代码转译为主流浏览器支持的ES5代码。目前流行的转译器有：、、（勉强算是），我们将选用Babel.js，它有一个更好的生态系统（插件、扩展等）。如果你尚不知晓其为何物，请记住这是一个非常棒的项目，我推荐你阅读它们的文档。最棒的是，Babel.js不仅支持ES6语法，它还可以编译JSX，所以我们可以在编译步骤彻底弃用标准React
JSX编译器了！
如果你只想使用Babel.js，我推荐你阅读它们的。Axel Rauschmayer博士曾经撰写，也值得一读，如果你对JavaScript感兴趣，我也极力推荐订阅他的博客。
现在我们选定了ES6转译器，让我们讨论一下自给自足的问题。如果我们开发纯React组件——那么可以轻松地让它们独立工作（可重用），你甚至可以参考学习编码方式。但如果我们需要在组件内提供默认的自身样式，需要怎样实现呢？
当然，我们可以选择“纯JS”方法向我们的JSX文件加入内联样式，就像这样：
const render = function() {
const defaultStyle = {
color: 'red',
&div style={defaultStyle}&
I have inline styles
JSX内联样式
这个方法存在一个问题，我们几乎无法通过父应用控制这个组件的样式。而且，如果我们需要加载图片或自定义字体文件，这个方法就会失效。所以，是否有更好的方法呢？
Webpack可以帮你解决这个问题！幸运的是，Webpack 加载器可以加载许多类型的文件。其背后的思想非常简单——在加载过程中动态地对载入文件进行可插拔转换。从本质上来说，加载器为我们处理各种文件。我们将选用一个特殊的来将我们的ES6代码转译为ES5代码。
但最酷的是，加载器可以处理任何文件。所以，如果我们想加载样式——我们只需要添加style-loader！最终，我决定使用LESS，它稍微复杂一些——我将创建如下的加载链：
首先，使用处理*.less文件，将其转换为CSS；
然后，使用将编译好的css传递给下一个步骤；
最后，使用将最终的样式引入到生成的代码中。
通过这个加载链，我们可以使用LESS编写组件的样式，下面这段代码演示了这种组件的入口点：
import './style/style.less';
import Component from './src/component';
export default C
借助Webpack将样式引入到JavaScript中&
正如你所见，加载样式像导入文件一样简单。的确，由less-loader、css-loader以及style-loader构成的加载链必须要在我们的Webpack配置文件中提前配置好（参考下一节的第一个示例）。
现在我们可以从相互独立的组件中加载样式，但是CSS默认使用全局变量，这意味着如果两个组件中使用了相同的类名，其中一个将被改写，我们如何回避这个问题呢？
我能想出来的最简单的方法是：在HTML标签和样式文件中，使用组件名称作为最外层元素的类名，人为地创建组件的作用域。就像这样：
.component-name {
const render = function() {
&div className="component-name"&
&span&I have scoped styles&/span&
组件样式的人为作用域
如此一来，所有组件将拥有唯一命名，当他们被封装进同一个应用中时不再产生冲突，能够很好地协同工作。而且，当我们想在应用层重新定义组件样式时，可以使用组件命名作为类名直接改写。
接着，你如何将ES6模块发布到NPM上呢？事实上，你无须这样做。至少目前还不需要。你可以直接向外发布你的原生代码，但这通常是一个糟糕的想法，当你后续想将代码引入到主应用或其它组件中时会感到非常痛苦。当然，你可以通知Webpack（同样也可以通知Browserify）来编译需要用到的代码。但是，如果这样做，你不得不使用Webpack（以及浏览器）来运行各种测试，我通常在命令行中运行测试，因为这样运行速度更快，并且便于后续的自动化测试封装（也就是我们常说的持续集成）。
目前我在项目中应用的最好方法是——同时传送原生ES6代码和编译后的ES5代码，实现这个方法非常简单：
向你的package.json文件添加构建指令；
在预发布阶段运行构建指令；
使用编译后的ES5代码作为主文件；
通过package.json文件的额外字段暴露ES6代码。
它看起来是这样的：
"name": "es6-component",
"version": "1.0.0",
"description": "My awesome ES6 component",
"main": "es5/component.js",
"es6": "index.js",
"scripts": {
"build": "gulp build",
"prepublish": "npm run build"
将ES6模块发布到NPM上的package.json
这种方法有两个优点：
在所有ES5代码中，我们可以轻松地引入或require()这个模块，它能够正常工作！
如果我们出于某些原因需要用到模块的源代码，我们同样可以轻松地通知Webpack使用“ES6”字段来加载或引入ES6代码。
单元测试及代码覆盖率
你必须佩服的是，在Babel中配置单元测试和代码覆盖率检测非常简单（得益于Babel伟大的生态系统，正如我之前提到的那样）。
--compilers: jsx?:babel/register
我一直使用作为测试工具，所以我会讲解如何将其应用到项目中。支持ES6代码非常简单，你只需在执行mocha指令时添加一个编译flag（或添加到mocha配置文件）就可以通知mocha使用babel预编译器：
完成这一步之后，就可以在ES6代码中运行测试了，当然你也可以使用ES6来编写测试文件！
现在要处理最棘手的部分——我们有了React组件，我们想使用mocha完成测试，却又不想在浏览器中运行测试（可以运行一个，但是它非常繁重），我们应该如何去做呢？
答案就是——基于用JavaScript实现了WHATWG的DOM和HTML标准。它比Phantom更轻量，并且满足几乎所有我们测试React所需的功能。
以下是为React配置jsdom环境的测试helper文件的示例：
import localStorage from 'localStorage';
import {jsdom} from 'jsdom';
// init jsdom
global.document = jsdom();
global.window = global.document.defaultV
global.navigator = global.window.
// local storage polyfill
global.window.localStorage = localS
global.localStorage = localS
// import react after dom
const React = require('react/addons');
before(function() {
// expose react and testutils
this.React = R
this.TestUtils = React.addons.TestU
beforeEach(function() {
// create container
this.container = global.window.document.createElement('div');
afterEach(function(done) {
// clean jsdom
this.React.unmountComponentAtNode(this.container);
// timeout
setTimeout(done);
在命令行中运行React测试的jsdom环境
注意我使用import声明引入jsdom和localStorage，但却使用require()加载React，这是因为import声明会被提前，我们需要确保在jsdom初始化之后加载React。如果你尝试在DOM就绪前加载React，那么直到你与组件进行交互时它才会开始工作，然后你得到的往往是各种各样的错误，因为React假设这属于非浏览器环境，不使用DOM相关特性。
现在我们有了正确运行的mocha测试，我们也可以轻松获取Istanbul覆盖率检测工具并正常执行：
istanbul cover _mocha -- -R spec
接下来实现我们的加分需求——无相互依赖的交互。这一部分内容来自于我正从事的一个项目，如果你不太感兴趣，大可跳过这一节。
当然，如果你依然感兴趣，那让我们一起讨论一下实现这个目标的方法。
我们需要使松耦合的系统中各部分相互交流，在完美的实现中它们甚至无须知道相互的存在，只须响应请求。这样的任务听起来是否非常熟悉？
你或许曾经听说过微服务这个概念，你甚至可能已经使用过它们。如果你对微服务所知甚少，我推荐你看一下。
如果你懒得看（或者想稍后看）他的演讲，那么简单了解一下微服务的思想：许多小规模、独立的，通过通用接口相互交流的离散服务实体。通用接口可以有多种形式，其中包括：消息总线、表征状态传输（REST，又称表征状态转移）、远程过程调用（RPC）等。
因为我们做的是客户端JavaScript应用，在接口问题上我们的确没有那么多的选择。幸运的是，有一个非常赞的库，它专门处理类似这样的情况——postal.js。
即使它仍然基于回调函数实现底层功能，但是它将消息分为channel和topic两类，提供了非常大的弹性。
通过示例演示所有的这一切是如何工作的，十分容易。
想象一下我们有一个App需要一些认证和URL签名功能来获取数据。通过postal我们可以定义一个认证channel，它将会监听那些签名请求，并通过不同的topic返回已签名的URL，就像这样：
import postal from 'postal';
// get postal channel for current component
const channel = postal.channel("auth");
const signUrl = () =& {
// signing code here
// listen to sign requests
const signAction = channel.subscribe("url.sign", function(url, envelope) {
const signedUrl = signUrl(url);
channel.publish("url.signed", signedUrl);
import postal from 'postal';
// get postal channels
const channel = postal.channel("query");
const authChannel = postal.channel("auth");
// define data fetching stuff
const requestUrl = 'http://...';
const getData = () =& {
// data-fetching logic here
// listen for data requests
const allItemsAction = channel.subscribe("items.all", () =& {
// wait for signed url
authChannel.subscribe("url.signed", (signedUrl) =& {
const data = getData(signedUrl);
channel.publish("items.data", data);
authChannel.publish("url.sign", requestUrl);
在组件中使用postal.js的channels进行通信
这段代码可以很好地工作，因为我们无须了解任何有关其它组件的信息——我们只须了解使用哪个channel和topic。一方面，这意味着管理这些内容的负担落到开发者身上；另一方面，在这种实现的基础上，我们可以轻松地更换认证组件——今天我们使用OAuth，明天我们使用自定义token系统，以后使用其它功能，我们只须更换一下认证组件就可以支持新的工作流。
代码检查和源码映射（Source Map）
最后，我们再为项目加入一些小改进：支持代码检查，启用源码映射。
不支持ES6和React代码，我们将使用代替它。eslint支持JavaScript和JSX的语法，并可以通过插件进行扩展。
将之于Webpack结合非常容易，你只须在你的Webpack配置文件中添加几行代码。下面这个代码片段展示了所需的配置：
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
debug: true,
// your other props here
preLoaders: [
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'eslint-loader'
// other modules options here
注意node_modules文件夹不包括在检查的范围内，所以程序只会检查你实际的组件代码。
Webpack将在编译过程结束后把所有的检查结果输出到控制台。
Turris.js——汇总一切
结合以上提及的所有内容，我创造了Turris.js——它包含一系列helper包，还有一个yeoman生成器，你可以用它轻松地为ES6 React应用和独立组件搭建脚手架。
如果你对生成器不感兴趣，只想看看应用和独立组件的示例代码，你可以在它们各自的Github仓库中找到它们：还有。
创建新应用
我尝试使创建新应用尽可能地简单，你可以这样创建一个新应用：
确保你已安装最新的io.js和NPM；
从NPM安装yeoman和turris-generator：
npm install -g yo generator-turris
创建一个新文件夹存放你的App，进入这个文件夹，执行turris生成器：
在回答一系列问题后，yeoman将为你完成所有工作；
执行“npm start”，启动你的新App；
访问http://localhost:8080，打开你最喜欢的编辑器并将应用改为你喜欢的样子。
除了为基础应用搭建脚手架外，Turris生成器还提供了三个helper生成器：
组件生成器——将在你的App中生成一个新的组件，可以非常便捷地生成你将不会重用的小组件；
页面生成器——将生成一个新页面并将它插入到React路由中，这里没有什么奇妙之处，它只是一个帮助你节省时间的子生成器；
Docker生成器——将生成一个dockfile，其中包含所有运行App所需的文件。
更多有关使用方法、子生成器、项目结构以及其它内容信息，可以在中找到。
创建一个独立组件
创建一个组件并不难，你可以这样做（需求与主生成器相同）：
通过NPM安装turris-generator-component：
$ npm install -g generator-turris-component
为你的组件创建一个新文件夹，进入这个文件夹，执行turris组件生成器：
在回答一系列问题后，yeoman将为你完成所有工作；
执行“npm start”，在调试模式下启动你的组件；
访问http://localhost:8080，打开你最喜欢的编辑器并将应用改为你喜欢的样子。
更多有关使用方法、项目结构以及其它内容信息，可以在中找到。
希望你已在这篇文章中找到有用的内容，或许你甚至已尝试我编写的生成器。即使你没有这样做——也请帮助我宣传一下！如果你已经尝试过——我非常乐意听取任何反馈意见，处理你们可能遇到的问题。当然，也很欢迎大家提交Pull Requests。（译者：刘振涛，审校：陈秋歌）
关于作者：Tim Ermilov，从事移动和Web开发工作。
英文原文：欢迎加入CSDN前端交流群：，进行前端技术交流。&
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章再添作出反应调试工具到Chrome开发者工具。
阵营开发工具是铬DevTools扩展开源阵营的JavaScript库。它可以让你检查作出反应成分层次的Chrome开发人员工具（前身为WebKit的网络督察）。
您将获得新的选项卡称为阵营在自己的Chrome DevTools。这说明你的根作出反应的是在页面上呈现的组件，以及他们最终渲染的子组件。
通过在你可以检查和编辑它的树中选择的组件之一是目前的道具和状态，在右侧面板。在面包屑，你可以检查所选择的组件，创建它的组件，即创建一个，组件等。
如果你查看一个使用常规元素选项卡页面上的元素做出反应，然后切换到标签做出反应，该元素将自动在树上做出反应选择。
同样，如果你有一个组件的呈现阶段中的断点，将在自动选择的作出反应标签。这可以让你一步通过渲染树，看到了一个组件影响另一个。
通过打破上的错误，你可以很容易地找到哪一个组件在渲染过程中抛出一个错误，并导致它什么道具。
注：中文翻译来自GOOGLE
React Developer Tools 插件概述
React Developer Tools插件是什么？React Developer Tools是一款由facebook开发的有用的，可以通过 Chrome Web存储获取。使用 Chrome Devtools 进行调试时，可以查看应用程序的 React 组件分层结构，而不是更加神秘的浏览器 DOM 表示。添加react developer tools到chrome，是对chrome开发工具的React调试工具。React的开发工具是开源Chrome DevTools延伸反应的JavaScript库。它允许你检查React在Chrome开发者工具组件的层次结构（原名WebKit Web Inspector）。你会得到新的标签要求在你的Chrome DevTools反应。这表明你的根反应组件在页面渲染，以及他们最终渲染组件。
React Developer Tools 插件功能介绍
React Developer Tools插件有什么用？在了解React Developer Tools之前最好先了解一下，React！
React究竟是什么？Facebook把它简单低调地定义成一个&用来构建UI的JavaScript库&。这个定义也许会让我们联想到许多JavaScript模板语言（比如Handlebars和Swig），或者早期的控件库（比如YUI和Dojo），但是React所基于的几个核心概念使它与那些模板和控件库迥然不同。事实上这几个核心概念非常超前，已经给整个前端世界带来了冲击性的影响。它们包括：
组件和基于组件的设计流程；
单向数据流动；
虚拟DOM取代物理DOM作为操作对象；
用JSX语法取代HTML模板，在JavaScript里声明式地描述UI。
这几条简单的原则放在一起带来了大量的好处：
前端和后端都能够从React组件渲染页面，完全解决了SEO长期困扰JavaScript单页应用的问题；
我们可以简单直接地写前端测试而完全忘掉DOM依赖；
组件的封装方式和单向数据流动能够极大地简化前端架构的理解难度。
React Developer Tools 插件下载与安装
1.React Developer Tools插件哪里下载？可以在本站下方或者chrome商店搜索React Developer Tools插件下载。
2.React Developer Tools如何安装？如果你可以打开chrome商店，搜索到React Developer Tools就可以直接点击下载安装。如果你的chrome商店无法打开，可以参照本站文章：
3. 也可以选择离线安装React Developer Tools教程如下：？&？
4.你也可以随时随地卸载React Developer Tools插件。
React Developer Tools 插件使用方法
1.React Developer Tools插件如何使用？怎么用？
安装成功后，浏览器的右上方出现现图示的log，用户如果想要调试的话就点击log就可以了。
通过选择树中的一个组件，你可以在右边的面板中检查和编辑它的当前的道具和状态。在面包屑，你可以检查所选组件，创建它的组件，创建一个组件，等等。如果您使用常规元素选项卡检查页面上的一个反应元素，然后切换到&React&选项卡，该元素将在&React树&中自动选择。
2.如下图所示显示了安装了 React Developer Tools 的 example3 组件分层结构外观。
3.类似地，如果在一个组件的渲染阶段有一个断点，将在&React&选项卡中自动选择。这允许你在渲染树中一步一步看到一个组件如何影响另一个。通过打破错误，你可以很容易地找到哪些组件在渲染过程中抛出一个错误，和什么样的道具导致它。
你可能感兴趣：
React开发者工具-React Developer Tools插件LOGO图片
React开发者工具-React Developer Tools Chrome插件相关插件推荐