react
特點(diǎn)
- 申明式寫(xiě)法
- 組件化
- 一次學(xué)習(xí)牍蜂，隨處編寫(xiě)
基本操作
創(chuàng)建新的項(xiàng)目
npx create-react-app my-app
cd my-app
npm start
通過(guò)bind(this)來(lái)將方法中的this綁定為組件名
<button onClick={this.HandleBtnClick.bind(this)}></button>
//優(yōu)化
//可以在constructor中寫(xiě)
this.HandleBtnClick=this.HandleBtnClick.bind(this)
//如此下面的相同代碼就不用了bind(this)了
通過(guò)setState來(lái)改變組件中state中的數(shù)據(jù)
this.setState({name:''})
生命周期
1.組件初始化
會(huì)執(zhí)行componentDidMount();
2.組件更新
會(huì)執(zhí)行componentDidUpdate();
3.組件卸載
會(huì)執(zhí)行componentWillUnmount();
react生命周期.PNG
組件傳值
父組件通過(guò)屬性的形式向子組件傳遞參數(shù)漾根，子組件通過(guò)props接受父組件傳過(guò)來(lái)的參數(shù)
子組件若想和父組件通信，則需要使用父組件傳遞過(guò)來(lái)的方法
//子組件
HandleSonClick(index){
this.props.delete(index)
}
//父組件
this.state.list.map((item,index)=>{
return <TodoItem delete={this.HandleItemClick.bind(this)} key={index} content={item} index={index}/>
})
css樣式
<button style={{backgroup:'red',color:'write'}}>add</button>
//或者
<button className={'red-btn'}>add</button>
//然后在style.css文件中
.red-btn{
backgroup:red;
color:write;
}
//然后在index.js中加入
import './style.css';
<React.Fragment>
可以用<React.Fragment>來(lái)代替組件中最外層需要的<div>
