react初識
以下是在研究中記錄的筆記:javascript
1,做用:局部的更新dom結構;虛擬dom保證性能
2,和mvc不一樣,mvc是對於技術上的分離(分類),而react是組件上的分離,每一個視圖模塊分離,複用,以視圖模塊爲單位
3,2的說法確實有所體現,並且,我感受好像模板引擎啊,難道是我幼稚?
4,淺析語法:
html : <div id='box'></div>
jsx
<script type='text/babel'>
js code...
ReactDOM.render(html_jsx_deal,document.getElementById('box'));
</script>
5,還能夠將jsx代碼放在js文件中,而後引入,<script type='text/babel' src='..'></script>,這樣引入,後面的引入的模塊錯了,
運行也不會受到影響的
6.自設定的屬性要加data-mine在標籤中
7.沒有if else ,用三目運算符
8,js表達式寫在{}中,註釋也寫在花括號中
9,var show = {
fontSize:30,
color:'red',
background:'black'
}
ReactDOM.render(
//html標籤後面是逗號
<h2 style={show}>hello world this is my first react js</h2>,
document.getElementById('show')
)
內聯樣式的寫法,並且是推薦內聯樣式的
10,感受jsx不能夠遍歷對象我日諸如for()方法都不可用
11,browser.js上線後,要放到服務器完成,不然很耗時間?????????????????有轉碼工具進行轉碼html
12****important
遍歷的表達式外層要有父標籤的包裹,不然會報錯,如:並且還證實了對象是能夠處理的
var you = [{name:'me'},{name:'zhongyaji'}];
ReactDOM.render(
<h3></h3>
//如這種回報錯
//{
// you.map(function(e){
// return <h2>{e.name}</h2>
// })
//}java
//這種就ok,循環loop處有h2的包裹
<h2>
{
you.map(function(e){
return <h2>{e.name}</h2>
})
}
</h2>react
,
document.getElementById('one')
)
13,這裏研究是否能夠用for和單純的對象:
這裏是不可以這麼寫的:
var lover= {name:'zhongyaji',age:'21',position:'princess',emotion:'deep and would not give up'};
ReactDOM.render(
<h1><strong>Introduce my wife</strong></h1>
<ul>
{
for(var i in lover){
<h3>{i}:{lover[i]}</h3>
}
}
</ul>,
document.getElementById('two')
)
14,關於組件有以下親筆栗子:---important組件開頭名必須
組件調用了不能在有其餘代碼了,
並且,要拼接組件,只能在調用以前拼接好(符合組件:以下)
<!--組件化-->
<div id="two"></div>
<script type="text/babel">
var ModleChase = React.createClass({
render:function(){
return <h2>個人愛人組件:{this.props.lover}<h4>只能有一個頂級的元素,這個費頂級,就是隻有一個父親h2</h4></h2>
}
});
ReactDOM.render(
//果真只能有一個父元素,一女不容2男
// <h1>個人愛人是</h1>
<ModleChase lover='zhongyaji'/>,
document.getElementById('two')
)
</script>
15,組件的拼接:符合組件jquery
<!--符合組件-->
<div id="three"></div>
<script type="text/babel">
var Wuruijie = React.createClass({
render:function(){
return (<strong>emotion to zhongyaji:{this.props.say}</strong>)
}
})
var Zhongyaji = React.createClass({
render:function(){
//return後面要加小括號 坑爹啊
return (<strong>emotion to wuruijie :{this.props.say}</strong>)
}
})
var Makelove = React.createClass({
render:function(){
//這個return 有無括號無所謂
return (
<div>
{this.props.love}
<Wuruijie say='我愛仙女'/>
<Zhongyaji say='我愛吳師傅'/>
</div>)
}
})
ReactDOM.render(
//這個斜線必須加
<Makelove love='愛的構造'/>,
document.getElementById('three')
)
</script>
注.this.props.children是它的不可自定義
16,狀態的改變
寄託於組件
var ChangeState = function(){
getInitialState:function(){
return {flag:true}
},
changeHandle:function(event){
//event事件對象
//設置爲相反的狀態,然判斷這個來給dom
this.setState:({flag:!this.state.flag});
},ajax
render:function(){
var text = this.state.flag?'true':'false';
return (
<p onClick={this.changeHandle}>{text}{this.props.jj}</p>
);
}
}
17,在react中的交互靠的就是狀態,對的,因此state很重要,,並且,this.state...能夠獲得狀態,要改變,須要this.setState,只要狀態改變了,
自動調用this.render來渲染
18,漸漸體會到了react的精髓,暴露的僅僅是有着不一樣屬性的html自定義標籤,而後,屬性和動態的,都由React.createClass({中的方法})
來進行控制,變化,主要靠state,對於一個組件是全局的,還有props,對於一個組件的屬性也是全局的
19,react在state改變以後,自動調用render來進行渲染,關於如何渲染?觸發改變?規定方法,時間觸發了就改變.移除更新也是
20,style的寫法應該是 <div style={{color:red;background:blue}}></div>
21,不該將轉化放在客戶端靠browser.js,很慢,而應當在服務端時候,用工具,就轉化編譯好,npm install -g react-tools
而後,jsx --watch origin/ use/來監聽和轉化!express
以下時候親手親測代碼:npm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>react</title>
<script type="text/javascript" src='../lazyload/jquery-2.1.4.min.js'></script>
<script type="text/javascript" src='react.min.js'></script><!--核心庫-->
<script type="text/javascript" src='react-dom.min.js'></script><!--dom操做-->
<script type="text/javascript" src='browser.js'></script><!--jsx轉化爲js-->
</head>
<body>
<div id="show"></div>
<div id="list"></div>
<div id='love'></div>
<div id='hate'></div>
<div id='hated'></div>
<!--這裏是jsx-->
<script type="text/babel" src='react_out.js'></script>
<script type="text/babel">
//是小括號
//ReactDOM外部寫js,內部寫ReactDOM.render();
var name = ['wuruijie','zhongyaji'];
console.log(name);
//遍歷數組的
ReactDOM.render(
<ul>
{
name.map(function(each){
return <li>lovers:{each}</li>
})
}
</ul>,
document.getElementById('list')
);
//數組的
var arr = [<h1>我要加油爲了鍾亞姬</h1>,<h2>必定要等我</h2>];
ReactDOM.render(
<div>個人感受{arr}個人感受</div>,
document.getElementById('love')
)
</script>
<!--對象的測試-->
<div id="one"></div>
<script type="text/babel">
var you = [{name:'me'},{name:'zhongyaji'}];
ReactDOM.render(
<h3>
{
you.map(function(e){
return <h2>{e.name}</h2>
})
}
</h3>
,
document.getElementById('one')
)
</script>
<!--組件化-->
<div id="two"></div>
<script type="text/babel">
var ModleChase = React.createClass({
render:function(){
return (<h2>個人愛人組件:{this.props.lover}<h4>只能有一個頂級的元素,這個費頂級,就是隻有一個父親h2</h4></h2>)
}
});
var Angle = React.createClass({
render:function(){
return (<h3>hahahahhahahhah{this.props.say}</h3>)
}
})
ReactDOM.render(
// <h1>個人愛人是</h1>s
// <Angle say='i love you zhongyaji'/>
<ModleChase lover='zhongyaji'/>,
document.getElementById('two')
)
</script>
<!--符合組件-->
<div id="three"></div>
<script type="text/babel">
var Wuruijie = React.createClass({
render:function(){
return (<strong>emotion to zhongyaji:{this.props.say}</strong>)
}
})
var Zhongyaji = React.createClass({
render:function(){
//return後面要加小括號 坑爹啊
return (<strong>emotion to wuruijie :{this.props.say}</strong>)
}
})
var Makelove = React.createClass({
render:function(){
return (
<div>
{this.props.love}
<Wuruijie say='我愛仙女'/>
<Zhongyaji say='我愛吳師傅'/>
</div>)
}
})
ReactDOM.render(
<Makelove love='愛的構造'/>,
document.getElementById('three')
)
</script>
<!--狀態,的改變-->
<div id="fairy"></div>
<script type="text/babel">
var Changeemotion = React.createClass({
//初始化狀態,用true和false來賦值,廣泛的,這個函數固定的-親測如此
getInitialState:function(){
//這個函數通常都是返回一個初始狀態
return {emotion:true};
},
//這個函數是自定義的
changHandler:function(event){
//event是事件對象,固定的setState
// this.setState({emotion:!this.state.emotion});
//兩個同樣和上面的寫法
this.setState(function(state){
return {emotion:!state.emotion}
})
},
//設定默認的props,不指定時候默認 getDefaultProps
getDefaultProps:function(){
return {
other:'<em>hahah</em>'
};
},
//拼接
render:function(){
var text = this.state.emotion?'我真的愛你':'我有苦衷,可是仍是愛你';
return (
<strong data-hello='you' onClick={this.changHandler}>這個情感是:{this.props.other}{text}</strong>
)
}
})
ReactDOM.render(
//此處就算不寫other,也有默認的
<Changeemotion />,
document.getElementById('fairy')
)
</script>
<!--聯動狂-->
<div id="all_move"></div>
<script type="text/babel">
var Content = React.createClass({
render:function(){
return (
<div>
<input value={this.props.emotion} type='text' onChange={this.props.deal_fun}/>
<h1 >{this.props.emotion}</h1>
</div>
)
}
})
var Show = React.createClass({
getInitialState:function(){
return {emotion:'We love toghether!'};
},
inputHandler:function(event){
this.setState({emotion:event.target.value});
},
render:function(){
return (
<div>
<Content emotion={this.state.emotion} deal_fun={this.inputHandler}></Content>
</div>
)
}
});
ReactDOM.render(
<Show></Show>,
document.getElementById('all_move')
)
</script>
<!--ajax實現-->
<div id="ajax"></div>
<script type="text/babel">
//創建一個ajax功能的標籤
var Ajax_label = React.createClass({
//通常都由的初始化state,貫穿一條線
getInitialState:function(){
return {
modle:{
name:'modle',
express:'the protector of princess'
},
lover:{
name:'she',
age:'16',
emotion:'deep and deep'
}
}
},
//這裏的bind是爲了保證this的指向始終指向實體元素(咱們所構造的)
componentDidMount:function(){
this.serverRequest = $.get(this.props.path,function(data){
console.log(data);
this.setState({
lover:data
})
}.bind(this),'json');
},
//當組件移除時候,應當銷燬的操做
componentWillUnmount:function(){
this.serverRequest.abort();
},
render:function(){
return (
<div>
<h2>modle_msg:{this.state.modle.name} and duty on {this.state.modle.express}</h2>
<h1>fairy_msg:{this.state.lover.name} and age is {this.state.lover.age} and {this.state.lover.emotion}</h1>
</div>
)
}
})
setTimeout(function(){
ReactDOM.render(
<Ajax_label path='lover.json'/>,
document.getElementById('ajax')
)
},10000)
</script>
</body>
</html>
- 1. 初識React
- 2. React 初識
- 3. 初識react
- 4. React初識
- 5. 初識 react-redux
- 6. React學習-React初識
- 7. React（1）初識React框架
- 8. React系列---React（一）初識React
- 9. React學習筆記——初識React Hooks篇
- 10. React初識整理（四）--React Router(路由)
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • C# 多維數組 - C#教程
- • 適用於PHP初學者的學習線路和建議
- • Git可視化極簡易教程 — Git GUI使用方法
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 初識React
- 2. React 初識
- 3. 初識react
- 4. React初識
- 5. 初識 react-redux
- 6. React學習-React初識
- 7. React（1）初識React框架
- 8. React系列---React（一）初識React
- 9. React學習筆記——初識React Hooks篇
- 10. React初識整理（四）--React Router(路由)