React起源于Facebook的內(nèi)部項(xiàng)目蝠咆，該公司積極嘗試引入HTML5技術(shù)用來(lái)架設(shè)Instagram網(wǎng)站枯饿，開(kāi)發(fā)中發(fā)現(xiàn)HTML5的性能下降明顯预鬓，達(dá)不到預(yù)期的效果船庇。他們就自己開(kāi)發(fā)了React框架坪郭。
React中文官方地址：https://reactjs.bootcss.com/docs/getting-started.html
1皆警、JSX即Javascript XML，它使用XML標(biāo)記來(lái)創(chuàng)建虛擬DOM和聲明組件截粗。
const element = (
????<div>
????????<h1>Hello!</h1>
????????<h2>Good to see you here.</h2>
????</div>
);
2信姓、數(shù)組的輸出方法? ?map((參數(shù)名)?=>{})
function?NumberList(props)?{
????const?numbers?=?props.numbers;
????return?(
????????<ul>{numbers.map((number)?=>
????????????<ListItem?key={number.toString()}?value={number}?/>
????????)}</ul>
????);
}
3、props和state
props：組件的參數(shù)绸罗、只可以讀取意推，不可修改
state：初始化的constructor方法里可以直接給state賦初始值
? ? ? ? ? ? ????eg：this.state={date:newDate()};
? ? ? ? ? ? 只能通過(guò)setState()方法來(lái)修改state；state的修改是異步的珊蟀；分別調(diào)用?setState()?來(lái)單獨(dú)地更新它們：
4菊值、事件的處理
????????// 為了在回調(diào)中使用 `this`，這個(gè)綁定是必不可少的
????????this.handleClick=this.handleClick.bind(this);
5育灸、生命周期
? ? 實(shí)例化階段
????????componentWillMount()?組件將要掛載到頁(yè)面
????????render()? ? ?組件掛載中
????????componentDidMount()??組件掛載完成
????組件更新：
????????componentWillUpdate(object nextProps, object nextState)
????????componentDidUpdate(object prevProps, object prevState)
????組件銷毀 ? ? componentWillUnmount()
6腻窒、組件傳值
????父組件向子組件傳值直接用props
????子組件向父組件可以通過(guò)方法來(lái)傳值，示例如下
父組件：
<TemperatureInput?scale="c"?temperature={celsius}?onTemperatureChange={this.handleCelsiusChange}?/>
handleCelsiusChange(temperature)?{? ? ? ?
????console.log('handleCelsiusChange'?+?temperature);? ? ? ?
? ? this.setState({?scale:?'c',?temperature?});?
}?
子組件
handleChange(event)?{????????
????console.log('etv'?+?event.target.value);????????
????this.props.onTemperatureChange(event.target.value)????
}????
render()?{????????
????const?temperature?=?this.props.temperature;????????
????const?scale?=?this.props.scale;????????
????return?(????????????
????????<fieldset>???????????????
?????????<legend>Enter?temperature?in?{scaleNames[scale]}:</legend>????????????????
????????<input?value={temperature}?onChange={this.handleChange}?/>????????????
????????</fieldset>???????
?????)????
}
