< 返回新闻公共列表
云南大王-React中的Props, State 与 render 函数
发布时间：2020-04-13 00:00:00
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(
{this.state.counter}
)
}
}
export default Counter;
父子组件写法
新增子组件Child.js
import React,{Component,Fragment} from 'react';
class Child extends Component{
render(){
return(
{this.props.num}
)
}
}
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(
)
}
}
export default Counter;
实现效果跟刚才一致
