React中的Props, State 与 render 函数

发布时间：2020-12-15 09:28:57 所属栏目：百科来源：网络整理

导读：React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他框架并存 3、组件化 4、单向数据流（父组件可以直接改变子组件的数据，但是子组件不能直接改变父组件的数据） ? Props,State 与 render 函数 render函数什么时候执

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;

实现效果跟刚才一致

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!