react-tutorial

5、件没用到）。可以把props看作是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不同的属性（比如这里的name）来定制显示这个组件。JSX从上面的代码可以看到将HTML直接嵌入了JS代码里面，这个就是React提出的一种叫JSX的语法，这应该是最开始接触React最不能接受的设定之一，因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的HTML是组成一个组件不可分割的一部分，能够将HTML封装起来才是组件的完全体，React发明了JSX让JS支持嵌入HTML不得不说是一种非常聪明的做法，让前端

6、实现真正意义上的组件化成为了可能。好消息是你可以不一定使用这种语法，后面会进一步介绍JSX，到时候你可能就会喜欢上了。现在要知道的是，要使用包含JSX的组件，是需要“编译”输出JS代码才能使用的，之后就会讲到开发环境。VirtualDOM当组件状态state有更改的时候，React会自动调用组件的render方法重新渲染整个组件的UI。当然如果真的这样大面积的操作DOM，性能会是一个很大的问题，所以React实现了一个VirtualDOM，组件DOM结构就是映射到这个VirtualDOM上，React在这个VirtualDOM

7、上实现了一个diff算法，当要重新渲染组件的时候，会通过diff寻找到要变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上不是真的渲染整个DOM树。这个VirtualDOM是一个纯粹的JS数据结构，所以性能会比原生DOM快很多。DataFlowReact概览5React入门教程“单向数据绑定”是React推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用React，你只要先知道有这么个概念。React概览6React入门教程开发

8、环境配置要搭建一个现代的前端开发环境配套的工具有很多，比如Grunt/Gulp/Webpack/Broccoli，都是要解决前端工程化问题，这个主题很大，这里为了使用React我们只关注其中的两个点：JSX支持ES6支持好消息是业界领先的ES6编译工具Babel随着作者被Fa