相关文章推荐
一、组件的生命周期介绍
组件的本质是状态机，输入确定，输出一定确定。
状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出响应。
可以使用事件的思路来理解状态。
组件的生命周期：
1.初始化阶段...
React中事件的用法概要事件处理函数的使用编写时间处理函数组件
React自有方法
render、componentWillUpdate、、、
属性和状态详解属性的含义和用法属性的含义props = properties
属性：一个事物的行至与关系
属性往往是与生俱来、无法自己改变的
属性的用法1、 ?可以是字符串、{123}、{"123"}...
转自 /blog/1065619
最近常遇到的尴尬是看着汇编代码却无法在脑中反应出正确的C、C++代码 。近日偶得一篇好文《revers...
ROS学习手记：
先看了《ROS操作系统的入门资料(2015修订)》，了解了ROS的基本概念。
1. ROS 的安装，
具备了虚拟机使用经验的同学可以搜“Ubuntu for ROS”进行下载...
本文为个人学习资料整理，内容整理自《Windows Powershell in Action》、网络和本人瞎编。什么是PowerShell
PowerShell is the new comman...
讲C++课的第一天，老师就让我们编一个C++的五子棋游戏，虽然她给出一些提示，还是觉得不可思议...
Configure the ROS Networks: Quick Reference: http://blog.csdn.net/sonictl/article/details/#t...
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)掌握这5大核心概念，你就理解了Reacta year ago概念二：JSX是什么玩意儿？是的你没看错，按照上面React组件的示例代码，React的意思就是让我们把HTML和JS代码全都写在一起。React是通过一种叫做JSX的语法扩展（X代表XML）来实现的。JSX乍看起来可能很奇怪，不过你慢慢会习惯的。是的我知道，按照我们以往的传统，应该尽量把HTML和JavaScript的代码分开才是。不过看样子现在忘记这教条才是提高你前端开发效率的正道。我们还是来举几个JSX实际应用的例子吧，比如你可以通过{}大括号来在JSX中显示JS变量：class MyComponent ponent {
render() {
return &p&Today is: {new Date()}&/p&;
你不再需要什么前端模板标签之类的东西了，你可以直接在JSX中使用三元运算符一类的逻辑：class MyComponent extends React.Component {
render() {
return &p&Hello {this.props.someVar ?
'World' : 'Kitty'}&/p&;
顺便提一句，可能你现在对ES6还不是特别的了解，那么我推荐你去看看阮老师的。概念三：Props & State又是啥？你可能会疑惑上个例子里的this.props.someVar是从哪里冒出来的。只要你对HTML有所了解，应该能够理解&a&标签的href属性是什么意思。延伸到React当中，属性就被称作props（properties的缩写）。组件之间可以通过Props进行交互。class ParentComponent extends React.Component {
render() {
return &ChildComponent message="Hello World"/&;
class ChildComponent extends React.Component {
render() {
return &p&And then I said, “{this.props.message}”&/p&;
也正因如此，React当中的数据流是单向的：数据只能从父组件传向子组件，反过来则不行。可是组件不可能只接受从父组件传来的数据（例如还有用户在input当中的输入），这时state就派上了用场。原文的例子实在是不接地气，在这里我情不自禁想要引用一句古诗来解释props和state之间的区别：人有悲欢离合，月有阴晴圆缺。我们可以把一个人的基因性别名字（我知道某些东西其实是可变的但请不要钻牛角尖好吗），月亮的大小重量理解为props，而随时可变的情感和圆缺则可以被理解为state.要注意，组件的state同样也能被传入到子组件中作为子组件prop的值。你需要明确的就是在React当中整个数据流都是向下传递的，包括路由、数据层、各个组件等等，从整个应用的state中来并汇聚到一起。在组建中，我们可以通过一个叫setState的方法来修改state，一般我们都会在事件处理的方法中调用它：class MyComponent extends React.Component {
handleClick = (e) =& {
this.setState({clicked: true});
render() {
return &a href="#" onClick={this.handleClick}&Click me&/a&;
一般React应用当中的绝大多数数据都是prop，只有当用户输入内容时才会使用state来处理。注意在上述的代码中，我们使用了自动绑定的语法，如果你想了解更多可以阅读官方文档.概念四：组件API在之前的内容当中我们已经提及了render和setState两个方法，他们都包含在组件API方法之中。还有一个比较有用的方法，我们一般会在其中初始化state并做一些方法的绑定。除了这三个方法之外，React还提供了一些列按照特定次序触发的。不过先不需要担心，只有当你深入一些了解React之后才有机会使用到它们。我们并不会在这里展开篇幅讲解React的API，因为学习React更主要的目的是学习如何编程和它的构建理念，而不是死记硬背一些无聊的API方法。概念五：组件类型我们在React当中一般按照如下的方法定义一个组件：class MyComponent extends React.Component {
render() {
return &p&Hello World!&p&;
在Class中我们还可以申明一个组件的许多其他方法，而在更多的情况下我们可以写一种函数式组件。类似于自定义一个模板标签一样，函数式组件接收一个props参数并返回特定的HTML内容，不过你当然仍可以在其中调用一些JS代码：const myComponent = props =& {
return &p&Hello {props.name}! Today is {new Date()}.&/p&
因为通常你的组件可能并不需要多么复杂的交互，也不需要多余的其他方法，用函数式写法可以让你的代码更加简洁。当然在这样的组件当中你也没有办法使用setState方法，也即是说函数式组件没有state，所以也可以被称作是无状态组件。当然，如果你接触React比较早，可能也见过下面这种写法：var Greeting = React.createClass({
render: function() {
return &h1&Hello, {this.props.name}&/h1&;
不同的组件类型也就延伸出了组件角色的概念，人们在实践过程中开始将组件分为两种角色，一种关注UI逻辑，用来展示或隐藏内容；另一种关注数据交互，例如加载服务器端的数据。这两种组件被称作容器组件和展示组件。分别用来处理不同的业务逻辑：//presentational component
class CommentList extends React.Component {
constructor(props) {
super(props);
render() {
return &ul& {this.props.comments.map(renderComment)} &/ul&;
renderComment({body, author}) {
return &li&{body}—{author}&/li&;
//container component
class CommentListContainer extends React.Component {
constructor() {
this.state = { comments: [] }
componentDidMount() {
url: "/my-comments.json",
dataType: 'json',
success: function(comments) {
this.setState({comments: comments});
}.bind(this)
render() {
return &CommentList comments={this.state.comments} /&;
这就又有点类似于view/controller的概念了。不过说来说去只是构建代码的不同方式而已，区分逻辑当然有其好处（例如分离业务逻辑，更好的代码复用），当然你也可以完全不吃这一套。高阶组件最后我们再稍微涉猎一些的概念（higher-order components通常缩写为HOCs）。其实可以把它理解为一个工厂方法，你可以传入一个组件并得到一个HOC返回的附加了更多功能的新组件。HOC不能直接在render方法中调用。如果你想了解更多，可以去看react-router当中实际应用的。这里还有一篇。总结React的代码是由一个个的组件构成的。组件采用了JSX语法扩展的写法。数据流总是从父组件到子组件，除state可以通过调用方法修改之外。组件包含一些特定方法和生命周期函数。你也完全可以用函数声明只有render方法的无状态组件。区分处理UI和数据逻辑的组件是一种很好的开发实践。高阶组件函数可以传入一个组件并为其赋予更多功能。信不信由你，目前我们介绍的内容已经涵盖了React开发者在日常工作中应用的90%的知识。听起来可能有些晦涩抽象，单React当中涉及的内容总能被简化为functions和props.等到你真正理解这些知识之后，React也就不会那么可怕了。在你掌握了React的模式，瞟一眼就能看懂它的代码之后，也就能自信的装X：切，React已经out啦~更多有关React的资源链接：有任何好的意见建议或有关React的想法观点，欢迎在评论区参与讨论。赞赏2 人赞赏168收藏分享举报文章被以下专栏收录良心干货、暖心教程、真心分享React技术栈相关教程、资讯。欢迎投稿~{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&有关前端开发的干货分享、教程指引。\n欢迎关注，欢迎投稿。&,&permission&:&COLUMN_PUBLIC&,&memberId&:1866974,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&良心干货、暖心教程、真心分享&,&urlToken&:&icode&,&id&:18572,&imagePath&:&1a8fcada9ebb.jpeg&,&slug&:&icode&,&applyReason&:&0&,&name&:&从零学习前端开发&,&title&:&从零学习前端开发&,&url&:&https:\u002F\\u002Ficode&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:15980,&avatar&:{&id&:&1a8fcada9ebb&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002F1a8fcada9ebb_l.jpg&,&articlesCount&:83},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-1fdfc07cd358c00_r.jpg&,&lastUpdated&:,&imagePath&:&v2-1fdfc07cd358c00.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[],&summary&:&原文链接：\u003Ca href=\&https:\u002F\\u002Fthe-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3\& data-editable=\&true\& data-title=\&React’s Five Fingers of Death. Master these five concepts, then master React.\& class=\&\&\u003EReact’s Five Fingers of Death. Master these five concepts, then master React.\u003C\u002Fa\u003E作者：\u003Ca href=\&https:\u002F\\u002F@sachagreif\& data-editable=\&true\& data-title=\&Sacha Greif\&\u003ESacha Greif\u003C\u002Fa\u003E几年前，我的一个朋友向我吹捧有个叫做React的框架会如何革新Web开发。其实一开始我觉得它只是又一个昙花一现的框架罢了。可在之后的时间里，R…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T17:58:26+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2120082,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&掌握这5大核心概念，你就理解了React&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:18572,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-1fdfc07cd358c00_r.jpg&,&author&:{&bio&:&少刷知乎多看书&,&isFollowing&:false,&hash&:&83a3b10a446f936a77f07f78870b5eec&,&uid&:96,&isOrg&:false,&slug&:&yubolun&,&isFollowed&:false,&description&:&我已委托“维权骑士”（）为我的文章进行维权行动。&,&name&:&余博伦&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyubolun&,&avatar&:{&id&:&v2-06d97a62e029d46d754eb716bc81b231&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:1866974,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:521072},{&sourceColumn&:{&lastUpdated&:,&description&:&欢迎关注本专栏，学习与提升你的React技术栈知识，同时也欢迎投稿。&,&permission&:&COLUMN_PUBLIC&,&memberId&:1866974,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&React技术栈相关教程、资讯。欢迎投稿~&,&urlToken&:&reactjs&,&id&:34541,&imagePath&:&v2-cd76bd1b0ecb1e53e17c97.jpg&,&slug&:&reactjs&,&applyReason&:&0&,&name&:&从零学习React技术栈&,&title&:&从零学习React技术栈&,&url&:&https:\u002F\\u002Freactjs&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:2235,&avatar&:{&id&:&v2-cd76bd1b0ecb1e53e17c97&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fv2-cd76bd1b0ecb1e53e17c97_l.jpg&,&articlesCount&:9},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-1fdfc07cd358c00_r.jpg&,&lastUpdated&:,&imagePath&:&v2-1fdfc07cd358c00.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[],&summary&:&原文链接：\u003Ca href=\&https:\u002F\\u002Fthe-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3\& data-editable=\&true\& data-title=\&React’s Five Fingers of Death. Master these five concepts, then master React.\& class=\&\&\u003EReact’s Five Fingers of Death. Master these five concepts, then master React.\u003C\u002Fa\u003E作者：\u003Ca href=\&https:\u002F\\u002F@sachagreif\& data-editable=\&true\& data-title=\&Sacha Greif\&\u003ESacha Greif\u003C\u002Fa\u003E几年前，我的一个朋友向我吹捧有个叫做React的框架会如何革新Web开发。其实一开始我觉得它只是又一个昙花一现的框架罢了。可在之后的时间里，R…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T17:58:26+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2120082,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&掌握这5大核心概念，你就理解了React&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:18572,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-1fdfc07cd358c00_r.jpg&,&author&:{&bio&:&少刷知乎多看书&,&isFollowing&:false,&hash&:&83a3b10a446f936a77f07f78870b5eec&,&uid&:96,&isOrg&:false,&slug&:&yubolun&,&isFollowed&:false,&description&:&我已委托“维权骑士”（）为我的文章进行维权行动。&,&name&:&余博伦&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyubolun&,&avatar&:{&id&:&v2-06d97a62e029d46d754eb716bc81b231&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:1866974,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:628508}],&title&:&掌握这5大核心概念，你就理解了React&,&author&:&yubolun&,&content&:&\u003Cblockquote\u003E\u003Cp\u003E原文链接：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002Fthe-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EReact’s Five Fingers of Death. Master these five concepts, then master React.\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E作者：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\\u002F%40sachagreif\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ESacha Greif\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E几年前，我的一个朋友向我吹捧有个叫做React的框架会如何革新Web开发。其实一开始我觉得它只是又一个昙花一现的框架罢了。可在之后的时间里，React名声鹊起，逐渐变得不容小觑了。\u003C\u002Fp\u003E\u003Cp\u003E也许你和我之前的状况差不多：总是听到React这儿好那儿爽，可是真正坐下来学习React的时候又毫无头绪。\u003C\u002Fp\u003E\u003Cp\u003E好消息是我在这里替你总结了，其实React只有“五大核心概念”。\u003C\u002Fp\u003E\u003Cp\u003E不过也请不要误会我的意思，并不是说我一篇文章就能能让你摇身一变成为精通React的大神，但如果你打算或者正在学习React的话，我至少能帮你理清思路。\u003C\u002Fp\u003E\u003Cp\u003E现在揭晓这五大核心概念：\u003C\u002Fp\u003E\u003Col\u003E\u003Cli\u003E组件\u003C\u002Fli\u003E\u003Cli\u003EJSX\u003C\u002Fli\u003E\u003Cli\u003EProps & State\u003C\u002Fli\u003E\u003Cli\u003E组件API\u003C\u002Fli\u003E\u003Cli\u003E组件类型\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Ch2\u003E概念一：React组件的作用\u003C\u002Fh2\u003E\u003Cp\u003E你需要了解有关React的第一要点就是——组件。你编写的所有React代码基本上就是一个包含许多小组件在内的大组件。\u003C\u002Fp\u003E\u003Cp\u003E那么到底什么是组件呢？我们可以拿HTML标签 &select& 来举一个很恰当的例子。原生的下拉框标签不止包括边框、文本、下拉箭头，它还掌控着自身打开关闭的逻辑。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-102bc8ac17757b77bdbef3f_b.jpg\& data-rawwidth=\&709\& data-rawheight=\&315\& class=\&origin_image zh-lightbox-thumb\& width=\&709\& data-original=\&https:\u002F\\u002Fv2-102bc8ac17757b77bdbef3f_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='709'%20height='315'&&\u002Fsvg&\& data-rawwidth=\&709\& data-rawheight=\&315\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&709\& data-original=\&https:\u002F\\u002Fv2-102bc8ac17757b77bdbef3f_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-102bc8ac17757b77bdbef3f_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E现在来设想一下你需要构建一个你自定义样式和行为逻辑的&select&：\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-1204cbaec7c28d101adf_b.jpg\& data-rawwidth=\&622\& data-rawheight=\&468\& class=\&origin_image zh-lightbox-thumb\& width=\&622\& data-original=\&https:\u002F\\u002Fv2-1204cbaec7c28d101adf_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='622'%20height='468'&&\u002Fsvg&\& data-rawwidth=\&622\& data-rawheight=\&468\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&622\& data-original=\&https:\u002F\\u002Fv2-1204cbaec7c28d101adf_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-1204cbaec7c28d101adf_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E这其实就是React能够帮你做到的。\u003Cstrong\u003EReact组件能够像原生的HTML标签一样输出特定的界面元素，并且也能包括一些元素相关逻辑功能的代码。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E现在我们一般会用ES6的Class语法来声明一个React组件，它包含一个能够返回HTML的render方法。（当然也可以用函数声明，我们在之后会聊到）\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EMyComponent\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EHello\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EWorld\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E!&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003E概念二：JSX是什么玩意儿？\u003C\u002Fh2\u003E\u003Cp\u003E是的你没看错，按照上面React组件的示例代码，React的意思就是让我们把HTML和JS代码全都写在一起。React是通过一种叫做JSX的语法扩展（X代表XML）来实现的。\u003C\u002Fp\u003E\u003Cp\u003EJSX乍看起来可能很奇怪，不过你慢慢会习惯的。\u003C\u002Fp\u003E\u003Cp\u003E是的我知道，按照我们以往的传统，应该尽量把HTML和JavaScript的代码分开才是。不过看样子现在忘记这教条才是提高你前端开发效率的正道。\u003C\u002Fp\u003E\u003Cp\u003E我们还是来举几个JSX实际应用的例子吧，比如你可以通过{}大括号来在JSX中显示JS变量：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Eclass MyComponent ponent {\n
render() {\n
return &p&Today is: {new Date()}&\u002Fp&;\n
}\n}\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E你不再需要什么前端模板标签之类的东西了，你可以直接在JSX中使用三元运算符一类的逻辑：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EMyComponent\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EHello\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsomeVar\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E?\u003C\u002Fspan\u003E
\u003Cspan class=\&s1\&\u003E'World'\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'Kitty'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fp&;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E顺便提一句，可能你现在对ES6还不是特别的了解，那么我推荐你去看看阮老师的\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EECMAScript 6 入门\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。\u003C\u002Fp\u003E\u003Ch2\u003E概念三：Props & State又是啥？\u003C\u002Fh2\u003E\u003Cp\u003E你可能会疑惑上个例子里的this.props.someVar是从哪里冒出来的。\u003C\u002Fp\u003E\u003Cp\u003E只要你对HTML有所了解，应该能够理解&a&标签的href属性是什么意思。延伸到React当中，属性就被称作props（properties的缩写）。组件之间可以通过Props进行交互。\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EParentComponent\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EChildComponent\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Emessage\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&Hello World\&\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E\u002F&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EChildComponent\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EAnd\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ethen\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EI\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Esaid\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&err\&\u003E“\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Emessage\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E”\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fp&;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E也正因如此，React当中的数据流是单向的：数据只能从父组件传向子组件，反过来则不行。\u003C\u002Fp\u003E\u003Cp\u003E可是组件不可能只接受从父组件传来的数据（例如还有用户在input当中的输入），这时state就派上了用场。\u003C\u002Fp\u003E\u003Cp\u003E原文的例子实在是不接地气，在这里我情不自禁想要引用一句古诗来解释props和state之间的区别：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E人有悲欢离合，月有阴晴圆缺。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E我们可以把一个人的基因性别名字（我知道某些东西其实是可变的但请不要钻牛角尖好吗），月亮的大小重量理解为props，而随时可变的情感和圆缺则可以被理解为state.\u003C\u002Fp\u003E\u003Cp\u003E要注意，组件的state同样也能被传入到子组件中作为子组件prop的值。你需要明确的就是在React当中整个数据流都是向下传递的，包括路由、数据层、各个组件等等，从整个应用的state中来并汇聚到一起。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-eba_b.jpg\& data-rawwidth=\&800\& data-rawheight=\&500\& class=\&origin_image zh-lightbox-thumb\& width=\&800\& data-original=\&https:\u002F\\u002Fv2-eba_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='800'%20height='500'&&\u002Fsvg&\& data-rawwidth=\&800\& data-rawheight=\&500\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&800\& data-original=\&https:\u002F\\u002Fv2-eba_r.jpg\& data-actualsrc=\&https:\u002F\\u002Fv2-eba_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E在组建中，我们可以通过一个叫setState的方法来修改state，一般我们都会在事件处理的方法中调用它：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EMyComponent\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EhandleClick\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ee\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsetState\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eclicked\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kc\&\u003Etrue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ea\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ehref\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&#\&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EonClick\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EhandleClick\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EClick\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eme\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fa&;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E一般React应用当中的绝大多数数据都是prop，只有当用户输入内容时才会使用state来处理。\u003C\u002Fp\u003E\u003Cp\u003E注意在上述的代码中，我们使用了自动绑定的语法，如果你想了解更多可以阅读官方文档\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fhandling-events.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EHandling Events\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E.\u003C\u002Fp\u003E\u003Ch2\u003E概念四：组件API\u003C\u002Fh2\u003E\u003Cp\u003E在之前的内容当中我们已经提及了render和setState两个方法，他们都包含在组件API方法之中。还有一个比较有用的方法\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Freact-component.html%23constructor\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Econstructor\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，我们一般会在其中初始化state并做一些方法的绑定。\u003C\u002Fp\u003E\u003Cp\u003E除了这三个方法之外，React还提供了一些列按照特定次序触发的\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fstate-and-lifecycle.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E生命周期函数\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。不过先不需要担心，只有当你深入一些了解React之后才有机会使用到它们。\u003C\u002Fp\u003E\u003Cp\u003E我们并不会在这里展开篇幅讲解React的API，因为学习React更主要的目的是学习如何编程和它的构建理念，而不是死记硬背一些无聊的API方法。\u003C\u002Fp\u003E\u003Ch2\u003E概念五：组件类型\u003C\u002Fh2\u003E\u003Cp\u003E我们在React当中一般按照如下的方法定义一个组件：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EMyComponent\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EHello\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EWorld\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E!&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E在Class中我们还可以申明一个组件的许多其他方法，而在更多的情况下我们可以写一种函数式组件。\u003C\u002Fp\u003E\u003Cp\u003E类似于自定义一个模板标签一样，函数式组件接收一个props参数并返回特定的HTML内容，不过你当然仍可以在其中调用一些JS代码：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Econst\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EmyComponent\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ep\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EHello\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E!\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EToday\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eis\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Enew\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003EDate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()}.\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fp&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E因为通常你的组件可能并不需要多么复杂的交互，也不需要多余的其他方法，用函数式写法可以让你的代码更加简洁。\u003C\u002Fp\u003E\u003Cp\u003E当然在这样的组件当中你也没有办法使用setState方法，也即是说函数式组件没有state，所以也可以被称作是无状态组件。\u003C\u002Fp\u003E\u003Cp\u003E当然，如果你接触React比较早，可能也见过下面这种写法：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EGreeting\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EcreateClass\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E \n\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eh1\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EHello\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ename\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fh1&;
\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E不同的组件类型也就延伸出了组件角色的概念，人们在实践过程中开始将组件分为两种角色，一种关注UI逻辑，用来展示或隐藏内容；另一种关注数据交互，例如加载服务器端的数据。\u003C\u002Fp\u003E\u003Cp\u003E这两种组件被称作容器组件和展示组件。分别用来处理不同的业务逻辑：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002Fpresentational component\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ECommentList\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econstructor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Esuper\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eul\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecomments\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Emap\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ErenderComment\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)}\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Ful&;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003ErenderComment\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eauthor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eli\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ebody\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E—\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eauthor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fli&;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&c1\&\u003E\u002F\u002Fcontainer component\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ECommentListContainer\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econstructor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Esuper\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E();\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estate\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecomments\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[]\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EcomponentDidMount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003E$\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eajax\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eurl\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&\u002Fmy-comments.json\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EdataType\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E'json'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Esuccess\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecomments\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsetState\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecomments\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecomments\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ebind\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ECommentList\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecomments\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecomments\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E\u002F&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E这就又有点类似于view\u002Fcontroller的概念了。不过说来说去只是构建代码的不同方式而已，区分逻辑当然有其好处（例如分离业务逻辑，更好的代码复用），当然你也可以完全不吃这一套。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E高阶组件\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E最后我们再稍微涉猎一些\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fhigher-order-components.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E高阶组件\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的概念（higher-order components通常缩写为HOCs）。\u003C\u002Fp\u003E\u003Cp\u003E其实可以把它理解为一个工厂方法，你可以传入一个组件并得到一个HOC返回的附加了更多功能的新组件。HOC不能直接在render方法中调用。如果你想了解更多，可以去看react-router当中实际应用的\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FReactTraining\u002Freact-router\u002Fblob\u002Fmaster\u002Fupgrade-guides\u002Fv2.4.0.md%23withrouter-hoc-higher-order-component\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E例子\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。\u003C\u002Fp\u003E\u003Cp\u003E这里还有一篇\u003Ca href=\&https:\u002F\\u002Fp\u002F\& class=\&internal\&\u003E深入理解 React 高阶组件\u003C\u002Fa\u003E。\u003C\u002Fp\u003E\u003Ch2\u003E总结\u003C\u002Fh2\u003E\u003Cul\u003E\u003Cli\u003EReact的代码是由一个个的组件构成的。\u003C\u002Fli\u003E\u003Cli\u003E组件采用了JSX语法扩展的写法。\u003C\u002Fli\u003E\u003Cli\u003E数据流总是从父组件到子组件，除state可以通过调用方法修改之外。\u003C\u002Fli\u003E\u003Cli\u003E组件包含一些特定方法和生命周期函数。\u003C\u002Fli\u003E\u003Cli\u003E你也完全可以用函数声明只有render方法的无状态组件。\u003C\u002Fli\u003E\u003Cli\u003E区分处理UI和数据逻辑的组件是一种很好的开发实践。\u003C\u002Fli\u003E\u003Cli\u003E高阶组件函数可以传入一个组件并为其赋予更多功能。\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E信不信由你，目前我们介绍的内容已经涵盖了React开发者在日常工作中应用的90%的知识。听起来可能有些晦涩抽象，单React当中涉及的内容总能被简化为functions和props.\u003C\u002Fp\u003E\u003Cp\u003E等到你真正理解这些知识之后，React也就不会那么可怕了。在你掌握了React的模式，瞟一眼就能看懂它的代码之后，也就能自信的装X：\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E切，React已经out啦~\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E更多有关React的资源链接：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fmarkerikson\u002Freact-redux-links\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ereact-redux-links\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fenaqx\u002Fawesome-react\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eawesome-react\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E有任何好的意见建议或有关React的想法观点，欢迎在评论区参与讨论。\u003C\u002Fp\u003E&,&updated&:new Date(&T09:58:26.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:13,&collapsedCount&:0,&likeCount&:168,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[{&isFollowed&:false,&name&:&sugar喵&,&headline&:&每天进步一点点噢耶~( *?ω?)〃&,&avatarUrl&:&https:\u002F\\u002F1bf1a9f7b_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&iqeqshuang-di-huan-zhe&,&bio&:&前端攻城狮\u002F居家小能手\u002F手语爱好者&,&hash&:&795a5ebc13bf3f92c4cd92d608661aec&,&uid&:88,&isOrg&:false,&description&:&每天进步一点点噢耶~( *?ω?)〃&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fiqeqshuang-di-huan-zhe&,&avatar&:{&id&:&1bf1a9f7b&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&isFollowed&:false,&avatarUrl&:&&,&isFollowing&:false,&type&:&people&,&slug&:&0&}],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-1fdfc07cd358c00_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&React&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1024,&height&:576},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&icode&,&name&:&从零学习前端开发&},&tipjarState&:&activated&,&tipjarTagLine&:&好好学习，天天向上&,&sourceUrl&:&&,&pageCommentsCount&:13,&tipjarorCount&:2,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T17:58:26+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&http:\u002F\u002Fwangzirui.net&,&isFollowing&:false,&hash&:&af121dfb8b&,&uid&:88,&isOrg&:false,&slug&:&wang-zi-rui-45&,&isFollowed&:false,&description&:&学过建筑，转了交互，在玩Dota&,&name&:&王大瑞&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fwang-zi-rui-45&,&avatar&:{&id&:&v2-bcd63dc76b5&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&d25ec1aced7d415c894debce82737c9e&,&uid&:581100,&isOrg&:false,&slug&:&mu-shou-95&,&isFollowed&:false,&description&:&&,&name&:&沐荍&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fmu-shou-95&,&avatar&:{&id&:&v2-001ef2d261b&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&f3f57b30523efdceb558&,&uid&:28,&isOrg&:false,&slug&:&yi-jiong-52&,&isFollowed&:false,&description&:&&,&name&:&益駉&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyi-jiong-52&,&avatar&:{&id&:&c8e60deec28dcb0bbe25f6bb&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&web工程师&,&isFollowing&:false,&hash&:&fd3c07eb5d961d66d7ef551cdb0ecf88&,&uid&:305300,&isOrg&:false,&slug&:&shen-ze-kun-98&,&isFollowed&:false,&description&:&&,&name&:&Moorez&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fshen-ze-kun-98&,&avatar&:{&id&:&v2-907c833e323aa3e4afbca4&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&从未用同一种方式搬砖超过三次&,&isFollowing&:false,&hash&:&0ac758fde57d00cc7d0c&,&uid&:20,&isOrg&:false,&slug&:&xiake360&,&isFollowed&:false,&description&:&逻辑和统计缺一不可。&,&name&:&许侠客&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fxiake360&,&avatar&:{&id&:&v2-f669ea143&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&https:\u002F\\u002Fv2-102bc8ac17757b77bdbef3f_200x112.jpg\& data-rawwidth=\&709\& data-rawheight=\&315\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&https:\u002F\\u002Fv2-102bc8ac17757b77bdbef3f_r.jpg\&\u003E原文链接：\u003Ca href=\&https:\u002F\\u002Fthe-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3\& data-editable=\&true\& data-title=\&React’s Five Fingers of Death. Master these five concepts, then master React.\& class=\&\&\u003EReact’s Five Fingers of Death. Master these five concepts, then master React.\u003C\u002Fa\u003E作者：\u003Ca href=\&https:\u002F\\u002F@sachagreif\& data-editable=\&true\& data-title=\&Sacha Greif\&\u003ESacha Greif\u003C\u002Fa\u003E几年前，我的一个朋友向我吹捧有个叫做React的框架会如何革新Web开发。其实一开始我觉得它只是又一个昙花一现的框架罢了。可在之后的时间里，R…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-1edfccf8c19_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端入门&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&少刷知乎多看书&,&isFollowing&:false,&hash&:&83a3b10a446f936a77f07f78870b5eec&,&uid&:96,&isOrg&:false,&slug&:&yubolun&,&isFollowed&:false,&description&:&我已委托“维权骑士”（）为我的文章进行维权行动。&,&name&:&余博伦&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyubolun&,&avatar&:{&id&:&v2-06d97a62e029d46d754eb716bc81b231&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&icode&,&name&:&从零学习前端开发&},&content&:&在这里和大家分享一下之前做的一个问卷调查的统计结果，一方面帮助萌新们更好地认识自己，另一方面也为内容生产者们提供一个可以参考的方向。\u003Cblockquote\u003E由于我的关注者大部分都来自知乎，样本可能稍有偏差，调查结果仅供参考。\u003C\u002Fblockquote\u003E\u003Ch2\u003E前端初学者的地域分布\u003C\u002Fh2\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-eeeb1caba2aa9bba823357e_b.jpg\& data-rawwidth=\&670\& data-rawheight=\&424\& class=\&origin_image zh-lightbox-thumb\& width=\&670\& data-original=\&https:\u002F\\u002Fv2-eeeb1caba2aa9bba823357e_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E问题统计\u003C\u002Fh2\u003E\u003Cb\u003E1.你平常都通过哪些方式学习前端知识？\u003C\u002Fb\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-b0e5f220f989e64db1d9_b.jpg\& data-rawwidth=\&1920\& data-rawheight=\&740\& class=\&origin_image zh-lightbox-thumb\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-b0e5f220f989e64db1d9_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cb\u003E2.你计划用多长时间学习并入门前端开发？\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-0d59c445437edd4ea90193_b.jpg\& data-rawwidth=\&1920\& data-rawheight=\&600\& class=\&origin_image zh-lightbox-thumb\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-0d59c445437edd4ea90193_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cb\u003E3.如果有机会你愿意参加培训班么？\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-818dab02e4d9a_b.jpg\& data-rawwidth=\&1920\& data-rawheight=\&600\& class=\&origin_image zh-lightbox-thumb\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-818dab02e4d9a_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cb\u003E4.你平常都通过哪些在线途径获取前端相关的学习资源？\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-d76ffbacfa_b.jpg\& data-rawwidth=\&1920\& data-rawheight=\&650\& class=\&origin_image zh-lightbox-thumb\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-d76ffbacfa_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cb\u003E5.你期望找到的前端开发岗位薪资是多少？\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-d53b3ba09d0e016cfd9e8c9dbb11d73e_b.jpg\& data-rawwidth=\&1920\& data-rawheight=\&600\& class=\&origin_image zh-lightbox-thumb\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-d53b3ba09d0e016cfd9e8c9dbb11d73e_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-baf79a3a4_b.jpg\& data-rawwidth=\&1173\& data-rawheight=\&403\& class=\&origin_image zh-lightbox-thumb\& width=\&1173\& data-original=\&https:\u002F\\u002Fv2-baf79a3a4_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cb\u003E6.您的身份背景？\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-f57b716e1fe016ecd1a28d80a2d0ba90_b.jpg\& data-rawwidth=\&1920\& data-rawheight=\&600\& class=\&origin_image zh-lightbox-thumb\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-f57b716e1fe016ecd1a28d80a2d0ba90_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cb\u003E7.作为一名前端新手你最关注的是什么问题？\u003C\u002Fb\u003E\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cp\u003E我大概总结了一下，问题主要分为四大类：\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E问学习方法\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E问如何增加实践经验\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E问发展前景\u003Cbr\u003E\u003C\u002Fli\u003E\u003Cli\u003E问如何找工作\u003Cbr\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E我也专门在稀土掘金上创建了一个收藏集，收集了很多这方面问题相关的文章\u003Ca href=\&https:\u002F\\u002F?target=https%3A\u002F\u002Fgold.xitu.io\u002Fcollection\u002Fccd\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E【前端开发-从入门到Offer】\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T10:08:34+08:00&,&url&:&\u002Fp\u002F&,&title&:&【调查结果】初学者们是如何学习前端的？&,&summary&:&在这里和大家分享一下之前做的一个问卷调查的统计结果，一方面帮助萌新们更好地认识自己，另一方面也为内容生产者们提供一个可以参考的方向。由于我的关注者大部分都来自知乎，样本可能稍有偏差，调查结果仅供参考。前端初学者的地域分布问题统计\u003Cb\u003E1.你平常都…\u003C\u002Fb\u003E&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:14,&likesCount&:52},&next&:{&isTitleImageFullScreen&:true,&rating&:&none&,&titleImage&:&https:\u002F\\u002F50\u002Fv2-5e3ae6f62c45da_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&微信小程序&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端开发&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&前端入门&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&少刷知乎多看书&,&isFollowing&:false,&hash&:&83a3b10a446f936a77f07f78870b5eec&,&uid&:96,&isOrg&:false,&slug&:&yubolun&,&isFollowed&:false,&description&:&我已委托“维权骑士”（）为我的文章进行维权行动。&,&name&:&余博伦&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyubolun&,&avatar&:{&id&:&v2-06d97a62e029d46d754eb716bc81b231&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&icode&,&name&:&从零学习前端开发&},&content&:&\u003Cblockquote\u003E微信推出小程序已经有些天了，相信同学们或多或少都把玩体验过小程序了。今天从零学习前端开发专栏就手把手带你，从零开始撸一个小程序。\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cb\u003EP.S.\u003C\u002Fb\u003E正式开始前先声明，本教程示例仅供前端萌新学习体验，闲杂人等可以退散啦。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-74e3b93c64fc2cdbad7fecf_b.png\& data-rawwidth=\&736\& data-rawheight=\&584\& class=\&origin_image zh-lightbox-thumb\& width=\&736\& data-original=\&http:\u002F\\u002Fv2-74e3b93c64fc2cdbad7fecf_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E小程序的注册（可跳过）\u003C\u002Fh2\u003E\u003Cp\u003E小程序是面向企业、政府、媒体等其他组织开放注册的，注册时必须提供相应的主体信息，所以假如你是不代表任何组织没注册过任何公司的独立开发者，就可以直接跳过这一步啦，虽然不注册就很遗憾的不能在真机体验调试自己写的小程序，不过最重要的是学习知识不是么？\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-ee3f1ebc1b457f58bec6f_b.png\& data-rawwidth=\&1176\& data-rawheight=\&524\& class=\&origin_image zh-lightbox-thumb\& width=\&1176\& data-original=\&http:\u002F\\u002Fv2-ee3f1ebc1b457f58bec6f_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E给有条件的同学的传送门：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fintroduction\u002Findex.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E小程序注册图文教程\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果你之前有玩过微信公众号的话，注册和配置流程其实都大同小异。\u003C\u002Fp\u003E\u003Ch2\u003E小程序本地开发环境搭建\u003C\u002Fh2\u003E\u003Cp\u003E小程序使用微信Web开发者工具作为IDE。微信Web开发者工具是微信官方使用\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fnwjs.io\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ENW.js\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E开发的一个跨平台桌面端应用，好坏先不做评价，至少能用。虽然现在小程序已经有了一些第三方的开发工具，有更多Hack以及更少的限制，但为了教程的简洁这里就不再赘述，有兴趣的同学可以自己去玩玩看。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fdevtools\u002Fdownload.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E微信Web开发者工具下载\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cem\u003E第三方小程序开发工具\u003C\u002Fem\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fcn\u002Fgithub\u002Fegret-docs\u002FWing\u002Fupdate\u002Fupdate320\u002Findex.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EEgret Wing 3.2.x 支持微信小程序实时预览的IDE)\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fchemzqm\u002Fwept\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWEPT 一个微信小程序实时运行环境\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E微信Web开发者工具的安装更是简单，不停点下一步就好了。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-d22f43b8dcc975d3cb02ffcc945cca09_b.png\& data-rawwidth=\&499\& data-rawheight=\&354\& class=\&origin_image zh-lightbox-thumb\& width=\&499\& data-original=\&http:\u002F\\u002Fv2-d22f43b8dcc975d3cb02ffcc945cca09_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E创建小程序项目\u003C\u002Fh2\u003E\u003Cp\u003E按照微信官方\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E简易教程\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的指引，创建一个新的小程序项目。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-2e1e6713daa3e6f3ea8121_b.png\& data-rawwidth=\&596\& data-rawheight=\&478\& class=\&origin_image zh-lightbox-thumb\& width=\&596\& data-original=\&http:\u002F\\u002Fv2-2e1e6713daa3e6f3ea8121_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E我们需要打开微信Web开发者工具，扫码登陆，选择开发本地小程序，然后点击新建项目，填入你的小程序AppID，项目名称，目录等等。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-ffc8acc85dceed_b.png\& data-rawwidth=\&593\& data-rawheight=\&466\& class=\&origin_image zh-lightbox-thumb\& width=\&593\& data-original=\&http:\u002F\\u002Fv2-ffc8acc85dceed_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E其实不管你有没有注册小程序，为了方便调试最好都选择无AppID，如果选择无AppID一些API的返回都是本地模拟的，并且没有请求远程服务器的域名限制，反而方便你开发调试。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-1a7fa03be8_b.png\& data-rawwidth=\&586\& data-rawheight=\&467\& class=\&origin_image zh-lightbox-thumb\& width=\&586\& data-original=\&http:\u002F\\u002Fv2-1a7fa03be8_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E创建项目的时候我们可以勾选创建quick start项目，来当作我们编写代码的模板，其实这个quick start项目的代码就是微信官方的简易教程中的示例代码，当然如果你有心的话，也可以手动跟着教程把代码敲一遍。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-6d86ebd254fc192d1a9a02fae5359876_b.png\& data-rawwidth=\&583\& data-rawheight=\&461\& class=\&origin_image zh-lightbox-thumb\& width=\&583\& data-original=\&http:\u002F\\u002Fv2-6d86ebd254fc192d1a9a02fae5359876_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E开发者工具简介\u003C\u002Fh2\u003E\u003Cp\u003E创建好项目并打开之后，我们会看到一个类似或者其实根本就是Chrome打开开发者工具并启用移动端模拟的界面。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-c1c3e34e899e2c58dc2a21fe9de50678_b.png\& data-rawwidth=\&1919\& data-rawheight=\&1079\& class=\&origin_image zh-lightbox-thumb\& width=\&1919\& data-original=\&http:\u002F\\u002Fv2-c1c3e34e899e2c58dc2a21fe9de50678_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E左边有3个选项卡【编辑】【调试】【项目】，开发的过程中大多数时间里我们都是在【编辑】【调试】之间来回切。\u003C\u002Fp\u003E\u003Cp\u003E切换到【编辑】选项卡，我们就能看到小程序项目目录以及代码编辑界面。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&http:\u002F\\u002Fv2-71b80a772d2cdc7fcd3db_b.png\& data-rawwidth=\&1919\& data-rawheight=\&1079\& class=\&origin_image zh-lightbox-thumb\& width=\&1919\& data-original=\&http:\u002F\\u002Fv2-71b80a772d2cdc7fcd3db_r.png\&\u003E\u003C\u002Ffigure\u003E\u003Ch2\u003E小程序示例开发\u003C\u002Fh2\u003E\u003Cp\u003E接下来我们会在quick start项目代码的基础上开发一个获取用户位置并显示天气的小程序，一边学习理解小程序的框架设计，一边尝试动手编写代码。\u003C\u002Fp\u003E\u003Cp\u003E首先每一个小程序都需要声明一个\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fframework\u002Fapp-service\u002