0. 前言
“任時光匆匆流去十性，我只在乎你”，最近這些時間都沒怎么更新文章塑悼，希望大家不要見怪啊，哈哈楷掉！最近公司在做react.js項目厢蒜，然而我不是太熟霞势，也是一個小白，也正在學(xué)習(xí)當(dāng)中斑鸦，然而大家如果有什么好的學(xué)習(xí)文檔也可以留給我愕贡，謝謝大家了。
1. 簡介
React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫巷屿。
2.特點
- 聲明式設(shè)計 ?React采用聲明范式固以，可以輕松描述應(yīng)用。
- 高效 ?React通過對DOM的模擬嘱巾，最大限度地減少與DOM的交互憨琳。
- 靈活 ?React可以與已知的庫或框架很好地配合。
- JSX ? JSX 是 JavaScript 語法的擴展旬昭。React 開發(fā)不一定使用 JSX 篙螟，但我們建議使用它。
- 組件 ? 通過 React 構(gòu)建組件问拘，使得代碼更加容易得到復(fù)用遍略，能夠很好的應(yīng)用在大項目的開發(fā)中。
- 單向響應(yīng)的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流骤坐，從而減少了重復(fù)代碼绪杏，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。
3. 要點
在說代碼的前提下纽绍，我想說幾點比較重要的幾點：
-
需要引入幾個文件蕾久，順序不能改變
Paste_Image.png - 組件式開發(fā)，什么都是組件顶岸，里面有什么創(chuàng)建組件腔彰，props傳值啊，綁定事件啊等
- 插件辖佣，最重要的就是recat-router霹抛，路由
4. 代碼實現(xiàn)
1.在title下面先引入幾個文件
<script src="../bower_components/react/react.min.js"></script>
<script src="../bower_components/react/react-dom.min.js"></script>
<script src="../lib/browser.min.js"></script>
2.代碼
- script type 的類型 babel
- 包含節(jié)點只能一個
- 組件一定要有閉合
- 可以用es6語法也可以用es5語法
3. HTML里面有個容器
<div id="demo"></div>
4. js代碼
<script type="text/babel">
class Hello extends React.Component{
getDate(){
return new Date-0;
}
render(){
var name = this.getDate();
return (
<div>
<div>123</div>
<div>hello,{this.getDate()}</div>
<input type="text"/>
</div>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
除了那些我們寫好的原生的HTML div 標簽，react里面我們可以自定義標簽卷谈，它呢代表并不是一個真實的DOM節(jié)點杯拐，在react看來，它只是react Components的實例而已世蔗，那這些react Components是怎么呈現(xiàn)在頁面中的呢端逼，就是調(diào)用react里面render()這個方法，第一個參數(shù)是我們要渲染的react Components污淋，第二個參數(shù)Components渲染完之后要插入的位置的容器element顶滩，綜上所述也就是將hello這個渲染結(jié)果插入到ID為demo的element容器里。
那么我們看一下渲染結(jié)果
那么在看一下咱們渲染之后的頁面結(jié)構(gòu)
那么現(xiàn)在看是不是已經(jīng)把我說的全部都體現(xiàn)了出來寸爆，還有那個為data-recatroot的div,咱們好像沒有命名這個屬性礁鲁，這個是recat內(nèi)部給你做的事情，因為我也是初學(xué)者仅醇，不太明白，當(dāng)然你知道了析二，可以告訴我。
還有添加一些樣式都怎么添加属韧，還可以這樣添加。
5. HTML結(jié)構(gòu)代碼
對挫剑，你猜對了柱衔，還是這個結(jié)構(gòu)代碼，一個簡單的容器
<div id="demo"></div>
6. CSS代碼
在這里我設(shè)置的是我在react 那個render()方法里的一個className的div唆铐，為什么叫className，因為class是js里的保留字艾岂，所以我們得用className這個屬性，而且我們這樣寫也是設(shè)置樣式的一種方式脆炎。
<style type="text/css">
.demo{
font-size: 50px;
}
</style>
7. js代碼
下面你要注意我寫的render()方法里的東西氓辣，還有另外一種設(shè)置樣式的方式秒裕，那就是設(shè)置內(nèi)聯(lián)樣式，為什么不直接設(shè)置fontSize:50,backgroundColor:'red',color:'#fff'”钞啸？因為recat這里不支持是字符串的形式几蜻，要寫一個對象，key和value這樣的方式体斩，它才可以解析梭稚。
<script type="text/babel">
class Hello extends React.Component{
render(){
var name = "劉玉森";
var style={fontSize:50,backgroundColor:'red',color:'#fff'};
return (
<div>
<div className="demo">123</div>
<div style={style}>hello,{name}</div>
<input type="text"/>
</div>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
展示出來之后的結(jié)果
props在react中是很重要的一個方法
8. HTML容器
這里呢容器沒有變，還是那個容器
<div id="demo"></div>
9. js代碼
<script type="text/babel">
class Hello extends React.Component{
render(){
return (
<div>
<div>123</div>
<div>hello,{this.props.name}</div>
</div>
)
}
}
class Hello1 extends React.Component{
render(){
return (
<div>
<div>123</div>
<div>hello,{this.props.address}</div>
</div>
)
}
}
class Parent extends React.Component{
render(){
return (
<div>
<Hello name={this.props.name}/>
<Hello1 address={this.props.address}/>
</div>
)
}
}
ReactDOM.render(
<Parent name="劉玉森" address="110"/>,
document.getElementById('demo')
)
</script>
這里呢我就得大家說一下我的那個代碼絮吵，首先呢弧烤，我先自定義了一個parent這個標簽，然后我創(chuàng)建了一個parent這個組件蹬敲，我利用this.props把組件外向組件內(nèi)傳值扼褪，然后我再創(chuàng)建倆個hello想幻，hello1的組件，獲取父元素parent里的值话浇。
看一下頁面渲染之后的效果
再看一下頁面渲染之后的頁面結(jié)構(gòu)
10.HTML代碼
依然還是這個容器
<div id="demo"></div>
11. js代碼
<script type="text/babel" >
class Hello extends React.Component{
render(){
return (
<ul>
<li>00000000</li>
{
this.props.children.map(function(item){
return <li>{item}</li>;
})
}
</ul>
)
}
}
ReactDOM.render(
<Hello>
<div>11111111</div>
<div>22222222</div>
<div>33333333</div>
<div>44444444</div>
</Hello>,
document.getElementById('demo')
)
</script>
這里呢，我們先寫一個li跟我們循環(huán)遍歷出來的li做個鮮明的對比闹究，這里就利用this.props.children這個方法來讀取組件內(nèi)部的子標簽幔崖，可以該數(shù)組進行遍歷
那么我們看下渲染之后的結(jié)果
還有我們渲染之后的頁面結(jié)構(gòu)
12. HTML代碼
容器......
<div id="demo"></div>
13. js文件
先寫一個我遇到的坑
<script type="text/babel" >
class Hello extends React.Component{
getDefaultProps(){
return {
name : "劉玉森"
};
}
render(){
return (
<h1> hello,{this.props.name}</h1>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
這樣定義組件你會發(fā)現(xiàn)，它不顯示渣淤，因為使用 Component 定義的組件不能這樣去設(shè)置默認值
看一下顯示的結(jié)果
是吧赏寇，它不顯示，我也是醉了＜廴稀Ｐ岫ā！
下面就演示一下正確的寫法用踩，下面是見證奇跡的時刻了脐彩！
<script type="text/babel" >
class Hello extends React.Component{
render(){
return (
<h1> hello,{this.props.name}</h1>
)
}
}
Hello.defaultProps = {
name : "劉玉森"
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
實踐是檢驗真理的唯一標準，來啊互相傷害懊肥摹梗掰！看圖說話
厲害了及穗，我的哥拥坛！就想問還有誰猜惋，低調(diào)啊著摔，這也是我試出來的,慢慢摸索來的...
14. HTML文件
容器還是容器
<div id="demo"></div>
在recat里面我們添加一些事件怎么做到呢谍咆？
15. js文件
<script type="text/babel">
class Hello extends React.Component{
clkFunc(){
alert('Hello');
}
render(){
return (
<div>
<button onClick={this.clkFunc.bind(this)}>點我</button>
</div>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>
bind這個方法，它是es5里的方法恩掷，可以改變this的指向黄娘，詳細請你自己查詢一下逼争，我解釋的不是太好誓焦。
那么看一下渲染頁面之后的結(jié)果
ref標簽的屬性杂伟，可以從組件中獲取真實的DOM節(jié)點稿壁，也可以綁定事件
16. HTML代碼
容器...
<div id="demo"></div>
17. js代碼
<script type="text/babel">
class Hello extends React.Component{
clkFunc(){
this.refs.iptText.value = "hello,劉玉森";
}
render(){
return (
<div>
<input ref="iptText" />
<button onClick={this.clkFunc.bind(this)}>點我</button>
</div>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>
看一下渲染之后的結(jié)果
通過ref這個標簽的屬性來綁定標簽，在添加一個點擊事件蕾羊，調(diào)用clkFunc這個函數(shù)執(zhí)行里面的語句，然后把值傳入input框內(nèi)书闸，渲染頁面浆劲。
下面說一下react的生命周期哀澈，在創(chuàng)建到銷毀的生命周期割按，狀態(tài)和屬性在生命周期中是如何流轉(zhuǎn)的？那么首先要了解react在瀏覽器中存在的三個狀態(tài)院领，分別是mounted够吩、update周循、unmounted鱼鼓，代表的含義是安裝(實例化)迄本、更新(存在期)嘉赎、銷毀(清理)公条。
- mouted 是指react components被render這個方法解析生成對應(yīng)的DOM節(jié)點并插入瀏覽器的DOM結(jié)構(gòu)的一個過程靶橱。
- update 是指一個mounted的recat components被重新的render的過程
- unmounted 是指一個mounted的react components對應(yīng)的DOM節(jié)點被從DOM結(jié)構(gòu)中移除的這樣一個過程
- 每一個狀態(tài)recat都封裝了對應(yīng)的hook函數(shù)关霸，翻譯成中文就是“鉤子函數(shù)”杰扫，WINDOW的消息處理機制為了能在應(yīng)用程序中監(jiān)控系統(tǒng)的各種事件消息，提供了掛接各種反調(diào)函數(shù)(HOOK)的功能佳遣。
如果讓我們自己封裝這樣的hook函數(shù)零渐，怎么設(shè)計封裝相恃？相信大多是人都i知道will和did拦耐，將要怎么怎么樣和已經(jīng)怎么怎么樣杀糯，將要mounted固翰、update、unmounted疗琉，和已經(jīng)mounted盈简、update柠贤、unmounted类缤，事實上react的設(shè)計思想也是如此餐弱，只不過人家比我們想的更加全面一些岸裙，更詳細一些，那么來一張圖片吧
18. HTML代碼
上容器
<div id="demo"></div>
19. js代碼
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {
opacity:0.1
}
}
componentDidMount(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity -=0.05;
if(opacity<0.1){
opacity=1
}
this.setState({
opacity:opacity
})
}.bind(this),100)
}
render(){
return (
<div style={{opacity:this.state.opacity,fontSize:50}}>
這個是測試react的生命周期
</div>
)
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('demo')
)
</script>
這里我們可以調(diào)用兩個函數(shù)，componentWillMount和componentDidMount的兩個方法幢尚，這兩個函數(shù)的區(qū)別是componentWillMount在mounting前被調(diào)用尉剩，componentDidMount在mounted后被調(diào)用理茎，然后測試一下react的生命周期
看一下渲染之后的頁面效果是什么樣的
剛才的代碼中我有用到state這個方法皂林，這個解釋就是說，react把組件看成狀態(tài)機getInitialState烛占，設(shè)置默認值忆家，setState()可以修改state的值芽卿，每次state的值發(fā)生改變的時候蹬竖，都會重新渲染UI
20. HTML代碼
這是這個文件的最后一個容器...
<div id="demo"></div>
21. js文件
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state = {
name:'劉玉森',
address:'北京',
}
}
clkFunc(){
this.setState({
name:'liuyusen',
address:'BeJing'
})
}
render(){
return (
<div>
<div>hello,{this.state.name},{this.state.address}!!!</div>
<button onClick={this.clkFunc.bind(this)}>點我</button>
</div>
)
}
}
ReactDOM.render(
<Hello />,
document.getElementById('demo')
)
</script>
這里我有一個點擊按鈕列另，當(dāng)我點擊按鈕的時候，改變state的值摊滔，props和state差別艰躺，props一般情況下我們通過組建調(diào)用方眨八，在調(diào)用組件的時候指定的廉侧，props一旦指定了在一般情況下是不會改變的段誊，而state是私屬于當(dāng)前組件的，state的值是可變的没陡，正所謂“props是專情的，state是花心的”贴彼，怎么樣修改state的值呢锻弓？那么就要用到setState這個方法來修改state的值青灼。
看一下剛才的代碼渲染之后的頁面效果
5. 結(jié)束語
我知道我寫的文章可能不是太好杂拨，可能存在許多的問題悯衬，當(dāng)然也需要大家的指點筋粗，最后希望我寫的文章能給大家?guī)韼椭。丽已。?/p>
