https://facebook.github.io/react/
JavaScript庫，只為構(gòu)建用戶界面榔幸，以組件為基礎(chǔ)，寫一次就可以在多處運(yùn)行
React特性
- jsx--使用簡單
- 單向數(shù)據(jù)流--數(shù)據(jù)綁定簡單
- 虛擬dom--加快程序的運(yùn)行效率
- 組件化開發(fā)
- 局限性：如何在子組件里操作父組件的數(shù)據(jù)霉囚；
安裝
- node_modules
- 創(chuàng)建package.json (npm init)
- npm install --save react react-dom package.json 里面的name不能和react一樣
- console.log(window); 搜索react可以很便捷的看到引入react文件后給我添加了哪些屬性和方法
一個(gè)簡單的例子
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
首先柄粹，注意到最后一個(gè)script標(biāo)簽對(duì)的type屬性是"text/babel"，這是因?yàn)閞eact獨(dú)有的JSX語法键畴，與JavaScript不兼容最盅。凡是使用JSX語法的地方，都要加type="text/babel"起惕。
-
上面的代碼一共引用了三個(gè)庫涡贱，它們必須首先加載，react.js是react的核心庫惹想，react-dom.js是提供與DOM相關(guān)的功能问词，browser.min.js的作用是將JSX語法轉(zhuǎn)為JavaScript語法。實(shí)際上線的時(shí)候嘀粱，應(yīng)該放在服務(wù)器上完成激挪。
$ babel src --out-dir build- 這句代碼可以將src子目錄的 js文件進(jìn)行語法轉(zhuǎn)換，轉(zhuǎn)碼后的文件全部放在 build子目錄锋叨。
一垄分、ReactDOM.render()
- 是react最基本的方法，用于將模版轉(zhuǎn)為html語言悲柱，并插入指定的DOM節(jié)點(diǎn)中锋喜。
二、JSX語法
JSX --模版引擎 和ejs/jade一樣
上面的代碼中豌鸡，html直接寫在了JavaScript語言中嘿般，不加任何引號(hào)，這就是JSX語法涯冠，它允許這樣的混寫炉奴。
var names=['zhangsan','lisi','wangwu'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div> hello {name} !</div>
})
}
</div>,
document.getElementById('example')
);上面這段代碼，體現(xiàn)了JSX基本的語法規(guī)則：遇到html標(biāo)簽(以'<'開頭)就用html規(guī)則解析蛇更；遇到代碼塊(以'{'開頭)就以JavaScript規(guī)則解析瞻赶。
JSX允許在模版中插入JavaScript變量，如果這個(gè)變量是數(shù)組派任，則會(huì)展開這個(gè)數(shù)組的所有成員砸逊。
var arr=[<h1>hello react!</h1>,<h3>react is awesome!</h3>];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("#example")
);
三、組件
組件可以讓你把UI分割成獨(dú)立的掌逛、可重用的部件,單獨(dú)地考慮每一塊师逸。
react允許將代碼封裝成組件，然后像插入一個(gè)普通標(biāo)簽一樣豆混，把這個(gè)組件插入到頁面中篓像。React.createClass()用于生成一個(gè)組件類
在使用已經(jīng)定義好的組件時(shí)动知，可以傳入屬性，并且可以在組件的內(nèi)部獲取到傳進(jìn)來的值：
this.props.屬性名;
不能在組件內(nèi)部更改傳進(jìn)來的屬性的值员辩。arr.map() map--映射
var arr=[1,2,3,45,6];
arr.map(function(a,b,c){ //元素盒粮，下標(biāo)，值
console.log(a)
})
example:
class Map extends React.Component{
render(){
return (
<div>
{(this.props.children).map(function(a,b){
return <li key=奠滑>{a}</li>
})}
</div>
)
}
}
ReactDOM.render(<Map><span>arr.map</span><span>map</span><span>Map</span></Map>,document.getElementById("example"))渲染的組件必須是一個(gè)完整的結(jié)構(gòu)丹皱，只能有一個(gè)根元素
class Abc extends React.Component{
render(){
return (
<ul>
<li></li>
<div></div>
</ul>
)
}
}-
★ 想要在組件內(nèi)部改變狀態(tài) 首先設(shè)置初始值state={}; 使用方法setState 可以：
重新設(shè)置 state的值
-
并重新進(jìn)行渲染
class State extends React.Component{}
-
生命周期
componentWillMount(){console.log('準(zhǔn)備渲染')}
componentDidMount(){console.log('渲染完畢')}componentWillUpdate(){console.log('即將更新')} componentDidUpdate(){console.log('更新完畢')} shouldComponentUpdate(){} //確定要更新？ 返回一個(gè)布爾值 componentWillReceiveProps(){console.log('元素的屬性即將發(fā)生更改')} render(){console.log('正在渲染')} 組件---流程是最重要的 思想最重要 但在技術(shù)角度來說是最不重要的 重在邏輯
