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(){ .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,1)">; class Child extends Component{ render(){ ( <Fragment> <div>{this.props.num}</div> </Fragment> default Child;
修改父组件 Counter.js
import React,1)">; import Child from './Child'this.addCount}>点击</button> <Child num={this.state.counter}/> </Fragment> default Counter;
实现效果跟刚才一致