React入门四

props:类型校验

1. 常见类型：array、bool、func、number、object、string
2. 必填项：isRequired

import React, { Component } from 'react'
import Narbar from './components/Narbar'
import List from './components/list'
import Box from './components/box'
export default class App extends Component {
  render() {
    return (
      <div>
        <Narbar>首页</Narbar>
        <Narbar>内容</Narbar>
        <Narbar><i>底部</i></Narbar>
        <hr/>
        <h4>props校验</h4>
        <List colors='black' num='你好' msg='我是传入的msg'></List>
        <List colors='black' num='你好'></List>
        <Box title={false} sex='人妖'></Box>
      </div>
    )
  }
}
---------------------------------------------------------------------
import React from 'react'
import PropTypes from 'prop-types'

const list = ({colors,num,msg}) => {
  return (
    <div>
        <p>{num}</p>
        <p>{msg}</p>
        {/* {colors.map(item=><p key={item}>{item}</p>)} */}
    </div>
  )
}

list.propTypes = {
    colors:PropTypes.array,
    num:PropTypes.number.isRequired
}
list.defaultProps={
    msg:'我是msg默认值'
}
export default list
-----------------------------------------------------------------------
import PropTypes from 'prop-types'
import React, { Component } from 'react'

export default class box extends Component {
  static propTypes = {
      title:PropTypes.oneOfType([PropTypes.number,PropTypes.string]).isRequired,
      sex:PropTypes.oneOf(['男','女'])
  }
  static defaultProps={
    ok:'我是默认的ok'
  }
  render() {
    return (
      <div>
          box
          <p>{this.props.title}</p>
          <p>{this.props.sex}</p>
          <p>{this.props.ok}</p>
      </div>
    )
  }
}

导入prop-types验证包，注意无需安装，react核心包内有

PropTypes.oneOfType( [ 类型1，类型2] )

定义校验的静态属性：

属性名：校验函数

属性名：校验函数.isRequired  //必须要传入

react生命周期：只有类组件有生命周期

• 创建期：constructor=>render=>componentDidMount【挂载完成，一般做ajax请求或者初始化插件，类似vue的mounted】
• 更新期：render=>componentDidUpdate【每次数据state或props更新都会执行】
• 销毁期：componentWillUnmount【组件将要卸载时触发，清楚定时器】

import React, { Component } from 'react'
import Child from './Child'
export default class App extends Component {
  constructor(){
    super()
    console.log('【父=挂载时】创建器=constructor');
  }
  state={
    count:100,
    isShow:true
  }
  changeCount=()=>{
    this.setState({
      count:this.state.count+10
    })
  }
  render() {
    console.log('【父=挂载时/更新时】渲染期=render');
    return (
      <div>App
        <button onClick={this.changeCount}>{this.state.count}</button>
        <hr/>
        {this.state.isShow?<Child></Child> : ''}
        <button onClick={()=>this.setState({isShow:!this.state.isShow})}>切换</button>
      </div>
    )
  }
  componentDidMount(){
    console.log('【父=挂载时】挂载完成=componentDidMount');
  }
  componentDidUpdate(){
    console.log('【父=更新时】更新完成=componentDidUpdate');
  }
}

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

export default class Child extends Component {
    constructor(){
        super()
        console.log('【子=挂载时】创建器=constructor');
      }
      state={
        num:100
      }
      changeNum=()=>{
        this.setState({
          num:this.state.num+20
        })
      }
  render() {
    console.log('【子=挂载时/更新时】渲染期=render');
    return (
      <div>Child
          <p>num的数据是：{this.state.num}<button onClick={this.changeNum}>累加20</button></p>
      </div>
    )
  }
  componentDidMount(){
    console.log('【子=挂载时】挂载完成=componentDidMount');
  }
  componentDidUpdate(){
    console.log('【子=更新时】更新完成=componentDidUpdate');
  }
  componentWillUnmount(){
    console.log('【子=卸载时】将要卸载=componentWillUnmount');
  }
}

钩子函数	触发时机	作用
constructor	创建组件时，最先执行	1、初始化state 2、创建Ref 3、使用bind解决this指向问题等
render	每次组件渲染都会触发	渲染UI（注意：不能调用setState）
componentDidMount	组件挂载（完成DOM渲染）后	1、发送网络请求 2、DOM操作

在react里面实现插槽2种方式：

方式1：父子通信，传递JSX片段即可

方式2：组件标签之间放内容，props.children访问

setState是异步的，setState会合并更新：

• 调用setState时，将要更新的状态对象，放到一个更新队列中暂存起来（没有立即更新）
• 如果多次调用setState更新状态，状态会进行合并，后面覆盖前面
• 等到所有的操作都执行完毕，React会拿到最终的状态，然后触发组价更新

对象写法：this.setState({key:val})  合并更新，采用最后一个更新

函数写法：this.setState(state=>{ return {key:val} })  在之前的状态上更新，每个都要执行，不是合并更新

标准写法：this.setState(函数/对象,回调函数)

  changeNum=()=>{
    // 对象写法
    // this.setState({num:this.state.num+1},()=>{
    //      console.log(this.state.num);
    //    })
    // this.setState({num:this.state.num+2},()=>{
    //   console.log(this.state.num);
    // })
    // this.setState({num:this.state.num+3},()=>{
    //   console.log(this.state.num);
    // })
    // 函数写法
    this.setState(oldState=>{return {num:oldState.num+1}},()=>{
      console.log(this.state.num);
    })
    this.setState(oldState=>{return {num:oldState.num+2}},()=>{
      console.log(this.state.num);
    })
    this.setState(oldState=>{return {num:oldState.num+3}},()=>{
      console.log(this.state.num);
    })
  }