React组件通信方式总结（下）

import React from 'react'
import ReactDOM from 'react-dom'


function tick() {
    let ele = <h1>{ new Date().toLocaleTimeString() }</h1>

    // Objects are not valid as a React child (found: Sun Aug 04 2019 20:34:51 GMT+0800 (中国标准时间)). If you meant to render a collection of children, use an array instead.
    // new Date() 是一个对象数据类型的值，React 元素不接收对象作为其子元素
    ReactDOM.render(ele, document.querySelector('#root'))
}

tick()

setInterval(tick, 1000) // 如果不包在一个函数中，时钟是不会每秒更新一次

// 1. 函数定义组件
function Welcome(props) {
    // props 是一个对象，是使用组件时，写在组件行内的属性和属性值组成的；
    console.log(data)
    return (<div>
        <p>{props.data.name}; {props.data.age}</p>
        <p>{props.x}</p>
    </div>)
}

ReactDOM.render(<Welcome data={{name: 'mabin', age: 18}} x='hahah' />, document.querySelector('#root'));

class Header extends Component {
    constructor () {
        super()
    }

    render () {
        // 在 render 函数中通过 this.props 访问 props
        return (<div>
            {this.props.content}
        </div>)
    }
}

class Hello extends Component {
    constructor (props) {
        super()
        // 注意在构造函数中不能访问 this.props ，props 会作为形参传入
    }

    render () {
        return (
            <div>
                <Header content="现在是北京时间：" />
                <p>{this.props.data.toLocaleString()}</p>
            </div>
        )
    }
}

// 使用这个组件
ReactDOM.render(<Hello data={new Date()} />, document.getElementById('root'));

function Welcome(props) {
    return <div>{props.time.toLocaleString()}</div>
}


setInterval(() => {
    // 每隔一秒钟 new Date的值会发生变化，即 Welcome 的 time prop 属性发生了变化，而视图自动变化
    let now = new Date()
    ReactDOM.render(<Welcome time={now} />, document.querySelector('#root'))
}, 1000)

function User(props) {
    console.log(props)
    let { name, age } = props;
    return <div>
        <p>{name}</p>
        <p>{age}</p>
    </div>
}

let data = {
    name: 'mabin',
    age: 18
}

// ReactDOM.render(<User name={data.name} age={data.age} />, document.getElementById('root'))

ReactDOM.render(<User {...data}/>, document.getElementById('root')) // 可以使用展开运算符把一个对象传给组件的props，等效于上面的写法

class Count extends Component {
  constructor () {
    super()

    // 在 constructor 中初始化一个状态；通过this.state 赋值一个对象的形式初始化；
    // 只有用类声明的组件才有 state
    this.state = {
      num: 1,
      x: 2
    }
    // this.add = this.add.bind(this)
  }



  add = () => {
    // 在 react 中如果要修改 状态只能通过 this.setState() 方法修改
    // setState 方法会进行合并 setState 有两种写法 一种是对象一种是函数

    // 1. setState 可以接受一个回调，回调需要 return 一个新的 state 对象，新的对象中只需包含要修改的 属性即可，例如这里我们要修改 num，return 的对象只需要包含num不用包含 x，react 会自动合并
    // 如果下一个状态依赖上一个状态，我们需要使用函数的形式
    /*this.setState((prevState) => {      console.log(prevState); // prevState 之前的状态对象      return {        num: prevState.num + 1      }    })*/

    // 2. setState 还可以接受一个对象，对象中需要包含要更新的 state 属性；
    this.setState({
      num: this.state.num + 1
    })

    // 我们发现，我们更新数据后，页面中使用 num 的地方的值也自动跟着改了；
    // react 同样是数据驱动的，当我们调用 setState 修改 state 时，react 会重新调用 render 函数，得到虚拟DOM 然后调用 DOM-diff 算法，把修改的那一部分重新渲染；
  }

  render () {
    // react 绑定事件时，需要使用驼峰命名法的事件名 onClick = { 事件处理函数 }

    // 在定义事件函数时，一般把事件函数声明在原型上，而绑定事件时，通过 this.add 访问这个事件函数

    return (<div>
      <p>NUM: {this.state.num} </p>
      <p>X: {this.state.x} </p>
      <button onClick={this.add}>给num加1</button>
    </div>)
  }
}

ReactDOM.render(<Count />, document.getElementById('root'))

yarn add prop-types --save

static propTypes = {
    name: PropType.string.isRequired, // 要求 name 是字符串类型 isRequired 表示必传
    age: PropType.number.isRequired // 要求 age 是数字类型，isRequired 表示必传
}

static defaultProps = {
    name: '珠峰',
    age: 10
 }

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropType from 'prop-types'
// React 的props 同样可以校验，但是需要一个第三方的库 prop-types

class User extends Component {
    constructor (props) {
        super()

        console.log(props) // 对象，把行内属性封装到一个对象中

        // props.name = 123 // 如果想对 props 进行修改，可以在 constructor 中进行修改
    }

    static propTypes = {
        name: PropType.string.isRequired, // 要求 name 是字符串类型 isRequired 表示必传
        age: PropType.number.isRequired // 要求 age 是数字类型，isRequired 表示必传
    }

    // 给props 设置默认值
    static defaultProps = {
      name: '京东',
    age: 19
  }

    render () {
        return (<div>
            <p>{ this.props.name }</p>
            <p>{ this.props.age }</p>
        </div>)
    }
}

let obj = {
    name: '张三',
    age: 18
};

ReactDOM.render(<User {...obj} />, document.querySelector('#root'));

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class Header extends Component {
  render () {
    return (<h1>
      <p>{this.props.data}</p>
    </h1>)
  }
}

// 此时的 Panel 是父组件而 Header 是子组件，父子组件通信时父传子，仍然是通过 props 传递的
class Panel extends Component {
  render () {
    return (<div className="container">
      <p>{this.props.news}</p>
      <Header data={this.props.min} />
    </div>)
  }
}

let data = {
  news: '快下课了',
  min: '拖几分钟'
}

ReactDOM.render(<Panel {...data} />, document.getElementById('root'))

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import 'bootstrap/dist/css/bootstrap.css'

class Panel extends Component {
  static defaultProps = {
    a: 1
  }
  constructor () {
    super()

    this.state = {
      color: 'success'
    }
  }

  changeColor = (color) => {
    this.setState({
      color
    })
  }

  render () {
    return (<div className="container">
      <div className={`panel panel-${this.state.color}`}>
        <div className="panel-heading">
          {this.props.head}        </div>
        <div className="panel-body">
          {this.props.body}        </div>
        {/*通过 modifyColor 这个 props 把 Panel 组件的 changeColor 方法传递给 Footer 组件*/}        <Footer type={this.state.color}
                modifyColor={this.changeColor} />
      </div>
    </div>)
  }
}

class Footer extends Component {
  change = () => {
    this.props.modifyColor('danger')
  }
  render () {

    return (<div className="panel-footer">
      <button className={`btn btn-${this.props.type}`} onClick={this.change}>变色</button>
    </div>)
  }
}

ReactDOM.render(<Panel head="头信息" body="信息主体"/>, document.getElementById('root'))

// React 同样是单向数据流，即数据只能通过只能从父组件流向子组件
// 所以子组件如果想修改父组件的数据，父组件在使用子组件的时候，通过props传给子组件一个可以修改父组件的方法，当子组件需要修改父组件的数据时，通过this.props 找到这个方法执行对应的方法就可以了