p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue" }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC" }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "Helvetica Neue"; min-height: 16.0px }
span.s1 { font: 14.0px "Helvetica Neue" }
span.s2 { font: 14.0px "PingFang SC" }
span.Apple-tab-span { white-space: pre }
应用场景：
1.复杂场景下的高性能
2.重用组件库，组件组合
3.懒
库
react.main.js react的核心库
react-dom.js 与dom相关的功能
browser.main.js 用于将jsx语法转化为js语法
组件生命周期：
状态:
Mounting：已插入真实DOM
Updating：正在被重新渲染
UnMounting：已移除真实DOM
方法：
componentWillMount 在渲染前调用，在客户端也在服务端
componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对于的DOM结构，可以通过this.getDOMNode()来进行访问。
componentWillReceiveProps 在组件接收到一个新的prop时被调用，初始化时不会被调用。
shouldComponentUpdate 返回布尔值，在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
componentWillUpdate 在组件接收到新的props或者state但还没render时被调用，在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount 在组件从DOM中移除时立即被调用。
添加样式：
添加类名，给类名添加样式 注意：class在es6中是关键字，得写成className
行内样式，style={{color:‘red‘}}或者style={obj},obj是定义的对象形式的变量
css:
.divbox {
font-size: 24px;
}
js: var Hello = React.createClass({
render: function() {
var obj = {color: ‘red‘};
return <div className="divbox" style={obj}>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<Hello name=‘world‘ />,document.getElementById(‘container‘));
注释
render:function(){
return (
{/*注释*/}
)
}
表达式
return ( <div><h4>计算：{1+1}</h4>
<h4>三元表达式：{1===1?‘true‘:‘false‘}</h4>
</div>
);
数组
var arr = [
<h4>数组元素1</h4>,
<h4>数组元素2</h4>
]return (
<div style={{opacity: this.state.opacity}}>
{arr}
</div>
);
ref
通过给元素设置的ref获取到dom结构
handleClick: function(event) {
{/*
<!-- 通过 ref获取到dom结构 -->
*/}
var tipE = ReactDOM.findDOMNode(this.refs.tip);
if(tipE.style.display == ‘none‘) {
tipE.style.display = ‘inline‘;
}else {
tipE.style.display = ‘none‘;
}
{/*
<!-- 阻止默认事件 -->
*/}
event.stopPropagation();
event.preventDefault();
},
render: function() {
return (<div>
<button onClick={this.handleClick}>显示|隐藏</button><span ref=‘tip‘>测试点击</span>
</div>);
}
注：代码中嵌套多个html标签时，需要使用一个div元素包裹。
state
初始化：
getInitialState: function() {
alert(‘initial‘);
return {
opacity: 1.0,
fontSize: ‘20px‘
};
}
修改：
componentDidMount: function() {
alert(‘did‘);
var _self = this;
window.setTimeout(function(){
_self.setState({
opacity: 0.5,
fontSize: ‘40px‘
})
},1000)
}
渲染react组件
ReactDOM.render(<div>
<ClickEvent/>
<TestClickComponent/>
<TestInputComponent/>
<HelloMessage />
</div>,document.getElementById(‘container‘));
注：有多个组件时需要使用一个div元素包裹。
事件
changeHandeler: function(event) {
event.stopPropagation();
event.preventDefault();
this.setState({
inputContent: event.target.value
})
},
render: function() {
return (
<div>
<input type="text" onChange={this.changeHandeler}/><span>{this.state.inputContent}</span>
</div>);
}
父子组件
子组件上使用表单 onChange 方法将触发 state 的更新并将更新的值传递到子组件的输入框的 value 上来重新渲染界面
//定义子组件 var Content = React.createClass({
render: function() {
return <div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} />
<h4>{this.props.myDataProp}</h4>
</div>;
}
});
var HelloMessage = React.createClass({ //初始化state
getInitialState: function() {
return {value: ‘Hello Runoob!‘};
}, //改变state的值
handleChange: function(event) {
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <div> {/*将state和change事件函数传递给子组件*/}
<Content myDataProp = {value}
updateStateProp = {this.handleChange}></Content>
</div>;
}
});
sublime的react插件：
Emmet:
自动扩展react的className
配置：Preference -> Package Settings -> Emmet -> KeyBindingd-User贴上下面的代码：
[{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
},
// run only if there‘s no selected text
{
"match_all": true,
"key": "selection_empty"
},
// don‘t work if there are active tabstops
{
"operator": "equal",
"operand": false,
"match_all": true,
"key": "has_next_field"
},
// don‘t work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand": false,
"operator": "equal",
"match_all": true,
"key": "auto_complete_visible"
}, {
"match_all": true,
"key": "is_abbreviation"
}
]
}]
babel: 支持ES6、.jsx代码语法高亮
jsformat:
js格式化，通过修改它的e4x属性可以使它支持jsx。
配置：Preference -> Package Settings -> JsFormat -> Settings-User贴上下面的代码：
{
"e4x": true,
// jsformat options
"format_on_save": true,
}