zoukankan      html  css  js  c++  java
  • 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(){
            this.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,{Component,Fragment} from 'react';
    
    class Child extends Component{
        render(){
            return(
                <Fragment>
                    <div>{this.props.num}</div>
                </Fragment>
            )
        }
    }
    
    export default Child;

    修改父组件 Counter.js

    import React,{Component,Fragment} from 'react';
    import Child from './Child';
    
    class Counter extends Component{
        constructor(props){
            super(props);
            this.addCount=this.addCount.bind(this);
    
            this.state={
                counter:1
            }
        }
    
        addCount(){
            this.setState({
                counter:this.state.counter+1
            })
        }
    
        render(){
            return(
                <Fragment>
                    <button onClick={this.addCount}>点击</button>
                    <Child num={this.state.counter}/>
                </Fragment>
            )
        }
    }
    
    export default Counter;

    实现效果跟刚才一致

  • 相关阅读:
    java环境变量配置
    单文档中自定义文件打开对话框和保存对话框
    汇编小知识(二)
    汇编指令
    汇编小知识(一)
    data directory(数据目录)之 引出表
    data directory(数据目录)之 引入表
    PE Header中的Optional Header中的最后一个成员变量data directory(数据目录)
    紧跟在PE Header后面的Section Table(节表)
    PE Header中的OptionalHeader
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12688048.html
Copyright © 2011-2022 走看看