React 的核心特性總結
1、React：宣告式開發
(JS或者jQuery屬性命令式開發）
2、可以與其他框架并存
3、組件化
4、單向資料流
（父組件可以直接改變子組件的資料，但是子組件不能直接改變父組件的資料）
Props, State 與 render 函式
render函式什么時候執行：
1、組件初次創建的時候，會執行一次
2、當state資料發生變更時，會再次執行
3、當props資料發生變更時，會再次執行
src/Counter.js
import React,{Component,Fragment} from 'react';
class Counter extends Component{
constructor(props){
super(props);
this.addCount=this.addCount.bind(this);
this.state={
counter:1
}
}
addCount(){
this.setState({
counter:this.state.counter+1
})
}
render(){
return(
<Fragment>
<button onClick={this.addCount}>點擊</button>
<div>{this.state.counter}</div>
</Fragment>
)
}
}
export default Counter;
父子組件寫法
新增子組件Child.js
import React,{Component,Fragment} from 'react';
class Child extends Component{
render(){
return(
<Fragment>
<div>{this.props.num}</div>
</Fragment>
)
}
}
export default Child;
修改父組件 Counter.js
import React,{Component,Fragment} from 'react';
import Child from './Child';
class Counter extends Component{
constructor(props){
super(props);
this.addCount=this.addCount.bind(this);
this.state={
counter:1
}
}
addCount(){
this.setState({
counter:this.state.counter+1
})
}
render(){
return(
<Fragment>
<button onClick={this.addCount}>點擊</button>
<Child num={this.state.counter}/>
</Fragment>
)
}
}
export default Counter;
實作效果跟剛才一致
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/124755.html
標籤：JavaScript
上一篇：React組件拆分與傳值