2、Props、state、setState

1、props父向子传值

//父亲组件
import React, { Component } from 'react'
import Child from './child'
export default class Father extends Component {
    render() {
        return (
            <>
            <h1>data</h1>
            <Child title="我是你爸爸"></Child>
            </>
        )
    }
}

//子组件
import React, { Component } from 'react'

//类组件
/* export default class child extends Component {
    render() {
        return (
            <div>
               {this.props.title}
            </div>
        )
    }
} */

//函数式组件（无状态组件）
export default (props) => {
    return (<div>
        {props.title}
    </div>)
}

2、props的默认值

父组件不传值的情况下：

import React, { Component } from 'react'

//类组件
export default class child extends Component {
    //静态属性（写法1）
    /* static defaultProps = {
        title:'props默认的值'
    } */
    render() {
        return (
            <div>
               {this.props.title}
            </div>
        )
    }
}
//静态属性（写法2）
child.defaultProps = {
    title:'props默认的值'
}

import React, { Component } from 'react'

//函数式组件（无状态组件）
export default function Child(props) {
    return (<div>
        {props.title}
    </div>)
}
Child.defaultProps = {
    title: 'props默认的值'
}

3、props.children

当父组件中的子组件中嵌套有div要显示的时候、子组件里面要用到props.children

//父组件
import React, { Component } from 'react'
import Child from './child'
export default class dataMouted extends Component {
    render() {
        return (
            <>
            <h1>data</h1>
            <Child >
                <div>儿子的儿子</div>
            </Child>
            </>
        )
    }
}

//子组件
import React, { Component } from 'react'

//函数式组件（无状态组件）
export default function Child(props) {
    return (
        <>
        <div>child：{props.title}</div>
        {props.children}
        </>
    ) 
}
Child.defaultProps = {
    title: 'props默认的值'
}

4、state

定义：1、通过构造函数（推荐）或者state方法

import React, { Component } from 'react'

export default class State extends Component {
    //定义state的方法1（推荐）
    //构造函数
   /*  constructor(props) {
        //调用了父类的构造函数
        super(props)
        this.state={
            isshow:false
        }
    } */
    //定义state的方法2
    state={
        isshow:false
    }
    render() {
        return (
            <div>
                {this.state.isshow?<div>state</div>:'不显示'}
            </div>
        )
    }
}

5、setState

作用：更新视图 用法:1、this.setState() 2、this.setState(回调函数) 3、this.setState(回调函数1，回调函数2)

import React, { Component } from 'react'

export default class State extends Component {
    //定义state的方法1
    //构造函数
   /*  constructor(props) {
        //调用了父类的构造函数
        super(props)
        this.state={
            isshow:false
        }
    } */
    //定义state的方法2
    state={
        isshow:false,
        count:0
    }
    render() {
        return (
            <div>
                {this.state.isshow?<div>state</div>:'不显示'}
            </div>
        )
    }
    componentDidMount(){
        /* setTimeout(() => {
            //方法1
            //this.setState({isshow:true})
            //方法2
            this.setState(prveState=>{
                return{
                    isshow:!prveState.isshow
                }
            })
        },3000) */
        //方法2
        this.setState(prev=>{
            return {
                count:prev.count+1
            }
        },()=>{
            console.log(document.querySelector('#root').innerHTML)
        })
    }
}

6、状态提升（兄弟传参）

import React, { Component } from 'react'
import Child1 from './Child1'
import Child2 from './Child2'
export default class Parent extends Component {
    state={
        data:''
    }
    handerReceveData(data) {
        this.setState({data})
        console.log(this.state.data)
    }
    render() {
        return (
            <>
            <Child1 onReceiveData={this.handerReceveData.bind(this)}></Child1>
            <Child2 numbers={this.state.data}></Child2>
            </>
        )
    }
}

import React  from "react"
export default (props) => {
    return (
        <div onClick={props.onReceiveData.bind(this,'Child1传递的值')}>child1</div>
    )
}

import React  from "react"
export default (props) => {
    console.log(props)
    return (
        <div>child2:{props.numbers}</div>
    )
}