1 React的组件化开发

2 React组件生命周期

3 React组件间的通信

4 React组件插槽用法

5 React非父子的通信

6 setState的使用详解

一、React的组件化开发

这里可以以2种方式导出内容：import { XXX } from "" 和import XXX from "",原因看下图的导出方式，这里用到的{ }不是解构。

this.props和this.state发生改变时，就会调用render,

注意：1、render可以return react元素，这个元素就是标签，这样子可以做到插槽效果，父组件传递给子组件。可以被传递。render(){ return (<div></div>)}

2、返回数组的时候会自动遍历数组里面的东西然后渲染出来，比如["asd"，"qwe","ert"]会在页面中直接展示asdqweert，如果是[<h1>123</h1>,<h2>222</h2>,<h3>333</h3>]就会直接把里面的标签渲染出来。

render(){ return [<h1>123</h1>,<h2>222</h2>,<h3>333</h3>]}

3、如果渲染布尔值或null和undefined都不会渲染东西出来。

render(){ return undefined}

因为函数式组件不能用this关键字，所以不能使用this.state={}、this.setState({})等的方法。

函数式组件没有构造器，所以不能进行状态维护（后面讲到hook的时候就可以做到），就是说，在这个函数里面定义的变量，在每次调用的时候就会初始化变量，不保存你修改变量后的值。

早期的函数组件就是拿来展示内容的，传递一个变量到函数里然后展示这个变量。复杂的东西都是去类组件。有了hook之后就不一样了。

二、React组件生命周期

生命周期主要讲的是类组件的

类实例：定义了一个类组件然后创建了许多个标签，创建实例

生命周期：挂载期间会执行：1、constructor构造函数；2、render渲染函数；3、componentDidMount函数。

当数据发生变化的时候：1、某些方法调用了setState等方法的时候，会引起render函数的调用重新渲染界面；2、然后就会执行componentDidUpdate函数。

当组件被卸载的时候：（这个作用之一是为了关闭卸载组件的某些事件监听，不怎么做的话会内存泄漏）：直接调用componentDidWillUnmount函数。

shouldComponentUpdate函数就是控制组件要不要重新渲染界面的，return false 的话就是不重新渲染。

三、React组件间的通信

下载插件方便开发：

进入插件快捷输入的表格网站：（点击snippets）

react 父组件传递给子组件数据：

这里面constructor有保存数据的作用，子组件想要使用父组件传递过来的参数就需要使用 this.props的方法并在constructor和super里面写props，this.props方法和this.state的使用方法差不多。

这里的constructor方法是可以不用写也能做到使用父组件传递过来的参数，因为默认就有做这个props。例如：（不写constructor）

props类型校验的使用方法：1、引入对应的库，2、写需要校验的变量对应的限制

图片中的Greeting是指文件名，name是父组件传递给子组件的变量。

限制父组件传递给子组件的限制可以是：1、数组，2、Boolean，3、函数，4、数字，5、对象6、字符串，7、标识符8、node结点类型（包括element，注释，文本），9、react元素，10、自定义组件，11、实例，12、选定好的几个枚举类型、13几种类型中的任意一个类型。其余类型可以去官网高级查找。

子组件默认值写法以及es13新特性的子组件默认值的写法：

//父组件中：
import React, { Component } from 'react'
import Header from './header'


export class App extends Component {
    constructor(){
        super()
        this.state ={
            count:10
        }
    }
//定义一个给子组件使用的函数
    addCount(count){
      this.setState({count:this.state.count+count})
    }
  render() {
    return (
      <div>{this.state.count}
        
        {/* 传给子组件的addCount可以任意取名字 */}
        <Header  addCount={(count)=>this.addCount(count)}  />
      </div>
    )
  }
}

export default App

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

export class header extends Component {

//不用写constructor也能使用props的内容
//子组件需要再写一个函数，在这个函数里面使用this.props来获得从父组件获得的函数
  add(count){
    this.props.addCount(count)
  }
  sub(count){
    this.props.addCount(count)
  }
  render() {
    return (
      <div>
        <button onClick={()=>this.add(1)}>+1</button>
        <button onClick={()=>this.add(5)}>+5</button>
        <button onClick={()=>this.add(10)}>+10</button>
        <button onClick={()=>this.sub(-1)}>-1</button>
        <button onClick={()=>this.sub(-5)}>-5</button>
        <button onClick={()=>this.sub(-10)}>-10</button>
      </div>
    )
  }
}

export default header

//父组件代码：

import React, { Component } from 'react'
import Header from './header'


export class App extends Component {
    constructor(){
        super()
        this.state ={
            tabList:["表单一","表单二","表单三"],
            tabIndex:0
        }
    }
// 父组件给子组件传递的自定义函数，用于子组件和父组件传递参数
    onChangeCurrentIndex(index){
      this.setState({tabIndex:index})
//这里需要异步才能获取最新的变量值，毕竟是通过setState改变参数
      setTimeout(() => {
        console.log('tabIndex'+this.state.tabIndex)
      }, 0);
    }
    
  render() {
    const {tabList,tabIndex} = this.state
    return (
      <div>
        <Header tab={tabList} tabIndex={(index)=>this.onChangeCurrentIndex(index)} />
        <h1>{tabList[tabIndex]}</h1>
      </div>
    )
  }
}

export default App

//子组件代码：
import React, { Component } from 'react'
import './style.css'

export class header extends Component {
  constructor(){
    super()
    this.state={
      currentIndex:0
    }
  }
  itemClick(index){
    this.setState({currentIndex:index})
//使用父组件传过来的自定义函数
    this.props.tabIndex(index)
    setTimeout(() => {
      console.log(this.state.currentIndex)
    }, 0);
  }
  render() {
    const {tab} = this.props
    const {currentIndex} = this.state
    return (
      <div>header
        <div className='tab'>
          {tab.map((item,index)=>{
          return <span
           className={`item ${currentIndex ===index ?'active':''}`}
           key={index}
           onClick={()=>this.itemClick(index)}
            ><span className='text'>{item}</span></span>
          })}
        </div>
      </div>
    )
  }
}

export default header

//css样式：
.tab{
    display: flex;
}
.tab .item{
    flex: 1;
    text-align: center;
    
}
.tab .item.active{
    color: red;
    
}
.tab .item.active .text{
    padding: 0 5px;
    border-bottom:2px solid red;
    
}