單向數(shù)據(jù)流驅(qū)動(dòng)，父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)
react最重要是組件
ReactJS官方地址：https://facebook.github.io/react/
GitHub地址：https://github.com/facebook/react
一、開(kāi)發(fā)環(huán)境的搭建：
1、在官網(wǎng)安裝react.js
2、在官網(wǎng)安裝react-dom.js
3、react.createClass 注冊(cè)一個(gè)組件類(lèi)
4.ReactDOM.render()將模板轉(zhuǎn)成和html語(yǔ)言，并插入指定的DOM節(jié)點(diǎn)，說(shuō)白了可以理解成就是一個(gè)渲染到頁(yè)面上的功能
二、使用 JSX
Javascript XML 模板
1.需要Babel ES6 進(jìn)行轉(zhuǎn)換,也可以使用babel核心js庫(kù)browser.js進(jìn)行插件的引入
2.坑：在script標(biāo)簽里面需要添加
3.JSX支持表達(dá)式的運(yùn)行
只要使用{}就可以了。
var HelloComponent = React.createClass( { render:function() { return(
Hello World{this.props.name?this.props.name:"world"}
) } } ); ReactDOM.render(,document.getElementById('reactContainer') )
4.巨坑：
react中render的return為什么要加上括號(hào)??？
var HelloComponent=React.createClass({ render:function(){return
Hello World
} }); ReactDOM.render(,document.getElementById('reactContainer') )
原因：
JavaScript會(huì)自動(dòng)給行末添加分號(hào)。如果 return 后面換行不加括號(hào)就會(huì)變成return;。
比如返回的是多行，就需要加括號(hào)，單行不需要，我在開(kāi)始的時(shí)候還遇到一個(gè)問(wèn)題，返回的內(nèi)容需要使用一個(gè)大的標(biāo)簽將其包裹。
就是這里return后面必須加（）
var HelloComponent=React.createClass({ render:function(){return(
HelloWorld
)} }); ReactDOM.render(,document.getElementById('reactContainer') )
數(shù)組中的JSX
let arr = [ <
h1 key = "1" > Hello world! < /h1>, <
h2 key = "2" > React is awesome < /h2>
];
ReactDOM.render( <
div > {
arr
}< /div>,document.getElementById('reactContainer') )
組件：
1.明確什么時(shí)候使用state（需要在組件里進(jìn)行變化的時(shí)候使用），一定要使用state,不要使用props.
2.明確什么時(shí)候使用props（在調(diào)用組件或者父組件傳遞組件里不進(jìn)行更改的時(shí)候）
3.聲明周期的使用（放邏輯代碼的方法）
4.在render函數(shù)里應(yīng)該是純粹的組件結(jié)構(gòu)，沒(méi)有任何邏輯代碼，不應(yīng)該修改組件state,不讀寫(xiě)DOM信息，也不與瀏覽器交互。
下面是一個(gè)實(shí)例的demo：
varHello=React.createClass({
//初始化狀態(tài)
getInitialState:function(){
return{
opacity:1.0
}
},
componentDidMount:function() {
setInterval(function(){
varopacity=this.state.opacity;
opacity-=.05;
if(opacity<0.1){
opacity=1.0;
}
//改變狀態(tài)
this.setState({
opacity:opacity
});
}.bind(this),100);
},
render:function(){
return(
Hello{this.props.name}
)
}
});
ReactDOM.render(,document.getElementById("demo"))
子節(jié)點(diǎn)：this.props.children
//這里的NoteList一定首字母一定要大寫(xiě)
varNoteList=React.createClass({
render:function(){
return(
{React.Children.map(this.props.children,function(child){
//這里一定要有return 而且后面一定要緊跟一個(gè)（），不能換行加，不然會(huì)不顯示
return(
{child} )})}
)
}
});
ReactDOM.render(
lalla
hahah
,document.getElementById("demo")
)
React組件：props 屬性驗(yàn)證
1.React.PropTypes提供各種驗(yàn)證器來(lái)驗(yàn)證傳入數(shù)據(jù)的有效性
2.getDefaultProps默認(rèn)值設(shè)置
varMytitle=React.createClass({
//1.propTypes的寫(xiě)法，作為屬性時(shí)必須要大寫(xiě)
propTypes:{
title:React.PropTypes.string.isRequired,
},
render:function(){
return(
{this.props.title}
)
}
})
//驗(yàn)證屬性為string類(lèi)型才可以輸出
vardata="1111";
ReactDOM.render(,document.getElementById("demo"))
獲取真實(shí)的DOM節(jié)點(diǎn)
使用ref屬性
demo代碼：
varMyCompont=React.createClass({
handleClick:function(){
//綁定一個(gè)焦點(diǎn)事件
this.refs.myTextInput.focus()
},
render:function(){
return(
)
}
});
ReactDOM.render(,document.getElementById("demo"))
React表單的使用：
表單的事件響應(yīng)和bind復(fù)用
1.在標(biāo)簽里的for在React里面不能正常使用，需要使用htmlFor
2.React表單bind復(fù)用
3.可控組件
Value 必須綁定到state狀態(tài)上，并且onChange事件實(shí)時(shí)監(jiān)控event.target.value才是算可控
4.不可控組件
使用onChange方法，用refs的獲取DOM的方法，value的默認(rèn)值要改成defaultValue,由于這個(gè)方法不好復(fù)用，所以能不用就不用了。
