React 特點(diǎn)
1.聲明式設(shè)計(jì) ?React采用聲明方式囤捻，可以輕松描述應(yīng)用鬓梅。
2.高效 ?React通過對DOM的模擬(虛擬DOM)，最大限度地減少與DOM的交互肢专。
3.靈活 ?React可以與已知的庫或框架很好地配合本姥。
4.JSX ? JSX 是 JavaScript 語法的擴(kuò)展肩袍。React 開發(fā)不一定使用 JSX ，但我們建議使用它婚惫。(對比模板引擎)
5.組件 ? 通過 React 構(gòu)建組件氛赐，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項(xiàng)目的開發(fā)中辰妙。
6.單向響應(yīng)的數(shù)據(jù)流 ? React 實(shí)現(xiàn)了單向響應(yīng)的數(shù)據(jù)流鹰祸，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單
一且皆為組件
函數(shù)化編程（Functional Programming）
它屬于”結(jié)構(gòu)化編程“的一種密浑，主要思想是把運(yùn)算過程盡量寫成一系列嵌套的函數(shù)調(diào)用
1.純函數(shù)（html） 輸入一定輸出也一定（只要不會改變原數(shù)組原對象就是純函數(shù)）
2.柯理化函數(shù)（js）原來能多個參數(shù)蛙婴，要求變成一個參數(shù)
function sum(a){
return function(b){
return function(c){
return a+b+c
}
}
}
sum(2)(3)(4) 9
高級寫法
var fn = a=>b=>c+>a+b+c
fn(2)(3)(4) //9
好處：
1.代碼簡潔，開發(fā)快速
2.接近自然語言尔破，易于理解
3.更方便的代碼管理
4.易于“并發(fā)編程”
5.代碼的熱升級
2.基礎(chǔ)
main.js
//引入react 可以在當(dāng)前JS中使用JSX語法
import React from "react"
//操作DOM
import ReactDOM from "react-dom"
ReactDOM.render(
h1, //組件1
document.getElementById("app"), //2
()=>{ //3
console.log("掛載成功")
}
)
index.html中街图，需要一個大div <div id="app"></div>
參數(shù)：
1.需要渲染的DOM節(jié)點(diǎn)或者組件,如果渲染的是標(biāo)簽則只需要寫標(biāo)簽名(如：h1)即可浇衬，如果是組件則需要按照標(biāo)簽的形式輸寫（如：<App/>）
2.需要將渲染的這個節(jié)點(diǎn)掛載在哪里
3.回調(diào)
渲染內(nèi)容用{}
如：
相當(dāng)于innerText
let message = "111";
let dom = <h2>{message}---{3>2?'大于':'小于'}----{1+1}</h2>; //輸出：111--大于--2
相當(dāng)于innerHtml
let h2 = <h2>React</h2>
let dom = <div>{h2}</div> //輸出<h2>React</h2>
判斷
相當(dāng)于if
let flag = true;
let dom = <div>{flag?<h2>111</h2>:''}</div> //輸出111
相當(dāng)于if-else 只能用三目來判斷
let n = 10;
let dom = <div>{n==1? <p>111</p>:n==2? <p>222</p>:<p>333</p>}</div>
相當(dāng)于show顯示隱藏
let flag = false;
let dom = <div><h2 style={{display:flag?"block":'none'}}>1902</h2></div>
綁定數(shù)據(jù)
相當(dāng)于bind
let title="一個圖片";
let style = {
width:"300px",
height:"300px",
background:'red'
}
let myclass = "box1 box2 box3"
let dom = <div title={title} style={style} className={myclass}>
<label htmlFor="">
111
</label>
</div>
jsx語法中class需要改寫成className for需要改寫成htmlFor
創(chuàng)建組件
1.通過class來創(chuàng)建一個組件
語法：class 組件名稱 extends React.Component{}
class App extends React.Component{
render(){
return(
<div></div>
)
}
}
export default App //導(dǎo)出APP
render: 是一個生命周期 用來渲染JSX DOM節(jié)點(diǎn)(虛擬DOM的渲染)
語法：
render(){
return <div></div>
}
注意:必須要return出去一個節(jié)點(diǎn) （只能返回一個節(jié)點(diǎn)類似與vue template里面只能有一個子元素）
如果需要返回多個元素的時(shí)候,只有一個根節(jié)點(diǎn)
簡寫，解構(gòu)方式
import React,{Component} from "react"
export default class App extends Component{
render(){
return <div></div>
}
}
React.Component: 是所有組件的父類
組件內(nèi)部必須包含返回一個生命周期render餐济，不寫會報(bào)錯
遍歷
例：
//需要用括號
第一種方法
{
arr.map((item,index) =>{
return <p key={index}>{item}</p>
})
}
第二種方法
{
arr.map( (item,index) =>（<p key={index}>{item}</p>）)
}
var fn = () =>{} 塊級作用域不會自動返回 需要寫return
var fn = () =>() 加框號返回整體 不需要寫return
var fn = () =>({}) 加框號返回對象 不需要寫return
組件中生命周期constrcutor中必須寫super
constrcutor(){
super()
this.state ={
message= "1902"
}
}
this.state
表示：當(dāng)前組件所需要的一些狀態(tài)
語法：
<h2>{this.state.message}</h2> //1902
事件綁定 如：on
handleClick //自定義函數(shù)
bind(this) //表示指向當(dāng)前組件
<button onClick={this.handleClick.bind(this)}></button>
handleClick(){
this.state.message = "1903"
}
因?yàn)槭菃蜗驍?shù)據(jù)流耘擂，所以數(shù)據(jù)不會改變
想要改變數(shù)據(jù)要用 this.setState
handleClick(){
this.setState({
massage:1903
})
}
數(shù)據(jù)修改 this.setState
1.react中如何修改this.state中的數(shù)據(jù)
2.this.setState是同步的還是異步的
-------異步的
3.this.setState的第二個參數(shù)的作用
4.this.setState為什么是異步的
語法
this.setState({
key:val
},()=>{})
key:需要改變狀態(tài)的屬性
val:需要改變成的值
第二種方法
this.setState(()=>({
message:val
}),()=>{})
this.setState的第二個參數(shù)( (中有state)=>{} )的作用：
1、查看數(shù)據(jù)是否修改成功
2絮姆、獲取數(shù)據(jù)更新后的DOM結(jié)構(gòu)
(中有state)=>{} 寫上state可以對數(shù)據(jù)進(jìn)行檢測
只要this.setState被調(diào)用那么render函數(shù)就會被執(zhí)行
render 執(zhí)行說明DOM重新加載一次
this.state 這個函數(shù)只能它之內(nèi)修改醉冤，之后不能修改，想要修改
強(qiáng)制更新數(shù)據(jù)
this.forceUpdate(); //底層原理手動調(diào)用render函數(shù)
雙數(shù)據(jù)綁定----多用在表單
重復(fù)的東西可以做解構(gòu)
如： let {message} = this.state
<input type="text" value={message} onChange = { this.handleChange.bind(this)}/> 不能傳參
<p>{message}</p>
value和onChange一起使用篙悯，單個會警告
React中value 與 defaultValue區(qū)別
1蚁阳、value屬于html的屬性 value會使輸入框變成一個受控組件
2、defaultValue屬于DOM的屬性 defaultValue會使輸入框變成一個非受控組件
受控組件--表示不能寫入
非受控組件---表示能寫入
性能優(yōu)化
事件收寫的方式
1鸽照、this.函數(shù)名稱.bind(this)
2螺捐、this.函數(shù)名稱 性能最好
3、onClick = {()=>{ }} 回調(diào)整不推薦
this.handleChange = this.handleChange.bind(this)
handleChange(e){
var val = e.target.value;
this.setState({
message:val
})
}
表單
export default class App extends Component{
constructor(){
super();
//存放當(dāng)前組件所需要的一些狀態(tài)
this.state = {
message:"1902",
radioVal:"男",
checkBoxVal:[],
selectedVal:"1902"
}
this.handleChange = this.handleChange.bind(this)
this.handleRadio = this.handleRadio.bind(this)
this.handleCheckBox = this.handleCheckBox.bind(this)
this.handleSelected = this.handleSelected.bind(this)
}
render(){
let {message,radioVal,checkBoxVal,selectedVal} = this.state;
return(
<div>
{/*<input type="text" value={message} onChange = {this.handleChange.bind(this)}/>*/}
<input type="text" value={message} onChange = { this.handleChange}/>
{/*<input type="text" value={message} onChange = { ()=>{*/}
{/*this.setState({*/}
{/*message:123*/}
{/*})*/}
{/*}}/>*/}
<p>{message}</p>
<hr/>
<label>
男 <input type="radio" value="男" checked={radioVal == '男'} onChange={ this.handleRadio}/>
</label>
<label>
女 <input type="radio" value="女" checked={radioVal == '女'} onChange={ this.handleRadio}/>
</label>
<p>您選擇的性別是:{radioVal}</p>
<hr/>
<label>
抽煙 <input type="checkbox" value="抽煙" onChange={ this.handleCheckBox}/>
</label>
<label>
喝酒 <input type="checkbox" value="喝酒" onChange={ this.handleCheckBox}/>
</label>
<label>
燙頭 <input type="checkbox" value="燙頭" onChange={ this.handleCheckBox}/>
</label>
<label>
大保健 <input type="checkbox" value="大保健" onChange={ this.handleCheckBox}/>
</label>
<ul>
您的愛好有:
{
checkBoxVal.map((item,index)=>(
<li key={index}>{item}</li>
))
}
</ul>
<hr/>
<select value={selectedVal} onChange={this.handleSelected}>
<option value="1902">1902</option>
<option value="1903">1903</option>
<option value="1904">1904</option>
<option value="1905">1905</option>
<option value="1906">1906</option>
</select>
<p>您選擇的班級是：{selectedVal}</p>
</div>
)
}
handleChange(e){
var val = e.target.value;
this.setState({
message:val
})
}
handleRadio(e){
var val = e.target.value;
this.setState({
radioVal:val
})
}
handleCheckBox(e){
let val = e.target.value;
let arr = this.state.checkBoxVal;
//判斷數(shù)據(jù)是否在數(shù)組中存在
let flag = arr.includes(val);
if(flag){
let index = arr.indexOf(val);
arr.splice(index,1);
}else{
arr.push(val);
}
this.setState({
checkBoxVal:arr
})
}
handleSelected(e){
let val = e.target.value;
this.setState({
selectedVal:val
})
}
}
