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;
复制代码
实现效果跟刚才一致
|
|
收藏
淘帖
踩
