React中的Props, State 与 render 函数

前端之家收集整理的这篇文章主要介绍了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';

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;

实现效果跟刚才一致

 

猜你在找的React相关文章