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;
实现效果跟刚才一致
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。