React中的Props, State 与 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'@H_403_34@;
 
class Counter extends Component{
    constructor(props){
        super(props);
        this.addCount=@H_403_34@this.addCount.bind(@H_403_34@this@H_403_34@);
 
        @H_403_34@this.state=@H_403_34@{
            counter:1@H_403_34@
        }
    }
 
    addCount(){
        @H_403_34@.setState({
            counter:@H_403_34@this.state.counter+1@H_403_34@
        })
    }
 
    render(){
        @H_403_34@return@H_403_34@(
            <Fragment>
                <button onClick={@H_403_34@this.addCount}>点击</button>
                <div>{@H_403_34@this.state.counter}</div>
            </Fragment>
@H_403_34@        )
    }
}
 
export @H_403_34@default Counter;

父子组件写法

新增子组件Child.js

import React,1)">;
 
class Child extends Component{
    render(){
        @H_403_34@(
            <Fragment>
                <div>{@H_403_34@this.props.num}</div>
            </Fragment>
@H_403_34@default Child;

修改父组件 Counter.js

import React,1)">;
import Child from './Child'@H_403_34@this.addCount}>点击</button>
                <Child num={@H_403_34@this.state.counter}/>
            </Fragment>
@H_403_34@default Counter;

实现效果跟刚才一致

React中的Props, State 与 render 函数

猜你在找的React相关文章