React Growth系列 - 2 - 入门的正确打开方式《REACT：引领未来的用户界面开发框架》
昨日启程，今日入门。
入门选择太多，尝试过官网教程、也尝试过看大牛的博客，不过都太零散。想想，不折腾了，还是找本宝典老老实实地啃！
废话不多说，上笔记。
点击&效果预览&即可查看笔记。
html 代码效果预览&p&
&h1 data-source-line=&1& style=&box-sizing: border- margin-right: 0 margin-bottom: 16 margin-left: 0 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space: margin-top: 0px !&&
&ol data-source-line=&2& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
JSX不是必须的
&h1 data-source-line=&5& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ol data-source-line=&6& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
对用户界面而言，展示指只占整体设计因素的一半，另一半则是响应用户输入
&h1 data-source-line=&9& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&10& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&11& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&h2 data-source-line=&12& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
只做两件事
&ul data-source-line=&13& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
更新DOM（只更新不读取）
&li style=&box-sizing: border-&&
&h1 data-source-line=&17& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&18& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&19& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
JavaScript XML
&h2 data-source-line=&20& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&21& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
让开发者使用熟悉的语法来定义HMTL元素树
&h2 data-source-line=&22& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&23& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&pre data-source-line=&24& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&&div className=&&&
&h2&Questions&/h2&&hr /&&/div&&/pre&
&h3 data-source-line=&29& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&pre data-source-line=&30& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&render: function () {
return &div className=÷r&&
Label Text&hr /&
&/div&;}&/pre&
&h3 data-source-line=&37& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&39& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&40& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&pre data-source-line=&41& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&var Divider = React.createClass({
render: function () {
&div className=÷r&&
&h2&Questions&/h2&&hr /&
&h3 data-source-line=&52& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
使用动态值
&pre data-source-line=&53& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&var text = 'Questions';
&h2&{text}&/h2&&/pre&
&h3 data-source-line=&57& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&58& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
示例：使用'&Divider&Questions&/Divider&'来表达一个组件 代码：
&pre data-source-line=&60& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&var Divider = React.createClass({
render: function () {
&div className=÷r&&
&h2&{this.props.children}&/h2&&hr /&
&h2 data-source-line=&72& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
JSX与HTML的不同之处
&h3 data-source-line=&73& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&pre data-source-line=&74& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&// 使用JS变量&div id={sueveyQuestionId} className={classes}&&/div&// 使用JS函数&div id={this.getSurveyID()}&&/div&&/pre&
&h3 data-source-line=&80& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ul data-source-line=&81& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
使用三目运算符
&li style=&box-sizing: border-&&
设置一个变量并在属性中引用它
&li style=&box-sizing: border-&&
将逻辑转化到函数中
&li style=&box-sizing: border-&&
使用&&运算符
&h3 data-source-line=&86& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h4 data-source-line=&87& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&88& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
仅在JSX中存在
&h4 data-source-line=&89& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&90& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&h4 data-source-line=&91& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&92& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&h4 data-source-line=&93& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
dangerouslySetInnerHTML
&p data-source-line=&94& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
设置原始HTML
&h3 data-source-line=&95& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h4 data-source-line=&96& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&97& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
无需再手动绑定，如：&span style=&text-decoration:line-box-sizing: border-&&this.handleClick.bind(this)&/span&
&pre data-source-line=&98& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&var Divider = React.createClass({
handleClick: function (event) {},
render: function () {
return &div onClick={this.handleClick}&...&/div&
&h3 data-source-line=&106& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h4 data-source-line=&107& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
作为子节点
&pre data-source-line=&108& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&&div&
{/* a comment about this input
with multiple lines */}
&input name=&email& placeholder=&Email Address& /&&/div&&/pre&
&h4 data-source-line=&115& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
作为内联属性
&pre data-source-line=&116& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&// 多行注释&div&
a note about the input
name=&email&
placeholder=&Email Address& /&&/div&// 单行注释&div&
name=&email& // a single-line comment
placeholder=&Email Address& /&&/div&&/pre&
&h2 data-source-line=&134& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&135& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
不能用的关键词
&ul data-source-line=&136& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
for(替代：for-text)
&li style=&box-sizing: border-&&
class(替代：className)
&h2 data-source-line=&139& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&pre data-source-line=&140& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&var styles = {
borderColor: ϧ&,
borderThickness: &1px&}
React.renderComponent(&div style={styles}...&/div&, node);&/pre&
&h2 data-source-line=&148& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
没有JSX的React
&h3 data-source-line=&149& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ul data-source-line=&150& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
定义组件类
&li style=&box-sizing: border-&&
创建一个为组件类产生实例的工厂
&li style=&box-sizing: border-&&
使用工厂来创建ReactElement实例
&h3 data-source-line=&154& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
创建React元素
&pre data-source-line=&155& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&// 创建普通HTML元素React.createElement('div');
React.DOM.div();// 创建自定义组件var DividerClass = React.createClass({displayName: 'Divider',
render: function () {
React.createElement(&div&, {className: ÷r&}),
React.createElement(&h2&, null, this.props.children),
React.createElement(&hr&, null)
});// 使用DividerClass方法1var divider = React.createElement(DividerClass, null, 'Questions');// 使用DividerClass方法2var Divider = React.createFactory(DividerClass);var
divider = Divider(null, 'Question');&/pre&
&h1 data-source-line=&176& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
组件的生命周期
&h2 data-source-line=&177& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&178& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
React为每个组件提供了生命周期钩子函数区响应不同的时刻——创建时、存在期及销毁时
&h1 data-source-line=&180& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&181& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&182& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&183& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
properties的缩写，可以使用它把任意类型的数据传递给组件
&h3 data-source-line=&184& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ul data-source-line=&185& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
使用props在整个组件树中传递数据和配置
&li style=&box-sizing: border-&&
避免在组件内部修改this.props或调用this.setProps,把props当作是只读的
&li style=&box-sizing: border-&&
使用props来做事件处理器，与子组件通信
&h2 data-source-line=&189& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&190& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&191& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
每一个React组件都可以拥有自己的state
&h3 data-source-line=&192& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
state与props的区别
&p data-source-line=&193& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
切着只存在于组件的内部
&h3 data-source-line=&194& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
应保存的内容
&p data-source-line=&195& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
最简单的数据，即那些组件正常工作时的必要数据。如：勾选框的勾选状态，下拉框是否显示下拉状态
&h2 data-source-line=&196& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ul data-source-line=&197& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
使用this.setState来设置状态，而不要使用this.state直接修改状态
&h1 data-source-line=&200& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&201& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&202& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&a href=&https://facebook.github.io/react/docs/events.html& style=&box-sizing: border- color: rgb(64, 120, 192); text-decoration: background-color:&&查看&/a&
&h2 data-source-line=&203& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
根据状态进行渲染
&h2 data-source-line=&204& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&205& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h4 data-source-line=&206& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&207& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
把传入的对象合并到已有的state对象（常用）
&h4 data-source-line=&208& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.4; font-size: 1.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
replaceState
&p data-source-line=&209& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
用一个全新的state对象完整地替换掉原有的state
&h3 data-source-line=&210& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&211& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&span style=&box-sizing: border- font-weight: 700;&&永远不要尝试通过setStae或者replaceState以外的方式去修改state对象&/span&
&h1 data-source-line=&214& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
组件的复合
&h2 data-source-line=&215& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&216& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
React组件是不可以拓展的，而是通过组件之间的组合来构建应用
&h1 data-source-line=&219& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&220& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&221& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
mixin允许我们定义可以在多个组件中共用的方法
&h2 data-source-line=&222& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ul data-source-line=&223& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
解决代码段重复的最强大工具之一
&li style=&box-sizing: border-&&
让组件保持专注于自身的业务逻辑
&li style=&box-sizing: border-&&
让我们使用强大的抽象功能;
&li style=&box-sizing: border-&&
让我们在不污染组件本身的情况下做一些丑陋的处理（比如管理内部属性__interval）
&h2 data-source-line=&228& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ul data-source-line=&229& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
一个事件并修改state的mixin（如flux store mixin）
&li style=&box-sizing: border-&&
一个上传mixin，它负责处理XHR上传请求，同时将状态以及上传的进度同步到state
&li style=&box-sizing: border-&&
渲染层mixin，简化在&/body&之前渲染子元素的过程（如渲染模态对话框）
&h1 data-source-line=&234& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&235& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&236& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
多数情况下，REACT的虚拟DOM足以用来创建大多的用户体验。然而，在某些情况下，为了实现某些需求不得不去操作底层的DOM。常见场景：需要与一个没有使用REACT的第三方类库进行整合，或者执行一个REACT没有原生支持的操作。
&h2 data-source-line=&237& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
访问受控的DOM节点
&p data-source-line=&238& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
###添加一个ref属性来实现
&pre data-source-line=&239& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&var DoodleArea = React.createClass(
render: function () {
return &canvas ref=&mainCanvas& /&;
&p data-source-line=&246& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
这样，即可通过this.refs.mainCanvas来访问到&canvas&组件
&h3 data-source-line=&248& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
getDOMNode()方法
&p data-source-line=&249& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
需要在render方法执行之后调用
&pre data-source-line=&250& style=&box-sizing: border- font-stretch: font-size: 13.6 line-height: 1.45; font-family: Consolas, 'Liberation Mono', Menlo, Courier, word-wrap: margin-top: 0 margin-bottom: 16 padding: 16 overflow: border-radius: 3 color: rgb(51, 51, 51); background-color: rgb(247, 247, 247);&&var DoodleArea = React.createClass({
render: function () {
// render 调用时，组件还未挂载，所以这将引起异常！
this.getDOMNode();
return &canvas ref=&mainCanvas& /&
componentDidMount: function () {
var canvasNode = this.refs.mainCanvas.getDOMNode();
// 这里是有效的！
&h3 data-source-line=&265& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
整合非React类库
&h1 data-source-line=&268& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&269& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
无约束组件
&h2 data-source-line=&270& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h1 data-source-line=&273& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&274& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h1 data-source-line=&277& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h1 data-source-line=&280& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
服务端渲染
&h1 data-source-line=&283& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&284& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&285& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&286& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
一个测试运行工具
&h3 data-source-line=&287& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
Immutable.js
&p data-source-line=&288& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
不可变数据结构
&h3 data-source-line=&289& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&290& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
一种模式，特点是严格的单向数据流
&h1 data-source-line=&293& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&294& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&ul data-source-line=&295& style=&box-sizing: border- padding: 0px 0px 0px 2 margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
&li style=&box-sizing: border-&&
Browserify
&li style=&box-sizing: border-&&
&p data-source-line=&298& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
##调试工具
&h3 data-source-line=&299& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&300& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
Chrome的React Developer Tool扩展
&h1 data-source-line=&303& style=&box-sizing: border- margin: 1em 0px 16 padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); line-height: 1.2; font-size: 2.25 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h2 data-source-line=&304& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
测试的类型
&h3 data-source-line=&305& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&306& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
每次只测试应用中最小的一块功能。通常就是直接调用一个函数，给定输入，对输出或者其他方面的影响进行验证
&h3 data-source-line=&307& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&308& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
从端用户的角度来验证应用功能是否正确的测试。对于Web应用来说就像真实用户一样，在浏览器四处点击、填写表单
&h2 data-source-line=&309& style=&box-sizing: border- padding-bottom: 0.3 border-bottom-width: 1 border-bottom-style: border-bottom-color: rgb(238, 238, 238); margin-top: 1 margin-bottom: 16 line-height: 1.225; font-size: 1.75 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&h3 data-source-line=&310& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
单元测试（客户端）
&p data-source-line=&311& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
Jasmine和Karma（同类型：Mocha、Chai、Sinon、Vows.js以及Qunit）
&h3 data-source-line=&312& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
单元测试（服务器）
&p data-source-line=&313& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
Mocha和Supertest（同类型：与客户端的一致，再加上jasmine-node）
&h3 data-source-line=&314& style=&box-sizing: border- margin-top: 1 margin-bottom: 16 line-height: 1.43; font-size: 1.5 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; white-space:&&
&p data-source-line=&315& style=&box-sizing: border- margin-top: 0 margin-bottom: 16 color: rgb(51, 51, 51); font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; line-height: 25.6 white-space:&&
Casper.js（同类型：Nightwatch.js、Zoombie.js、基于Selenium的（Capybara、Waitr等））
4 总笔记数
1348 总阅读量
Copyright &
All Rights Reserved.
合作伙伴：
