react_06组件化开发(一)

组件化:

用分而治之的思想去处理应用或页面，一个页面分成多组件，每个组件实现功能块，可以重复利用，便于维护，模块化和组件化的概念就是基于此。

vscode插件:ES7 React

掌握常见的快捷键:rcc、rpc等等

---

React中的组件化:

以定义方式来划分:
1.类组件

• 组件名称大写字符开头
• 类组件需要继承React.Component
• 类组件必须实现render函数

import React, { Component } from 'react'
export default class App extends Component {
  render() {
    return (
      <div>
          <h2>类组件</h2>
      </div>
    )
  }
}

2.函数式组件(不带hooks情况下)

• 函数的返回值与类组件render函数返回一样的内容
• 没有生命周期函数
• 没有this(组件实例)
• 没有内部状态(state)

export default function App(){
  return(
    <div>
       <h2>函数式组件</h2>
    </div>
  )
}

---

render函数返回值:

可以返回常见的jsx创建的React元素、自定义组件、数组、fragments、Portals、字符串、数值类型、布尔、null。

//返回数组中间以逗号分割
export default class App extends Component {
  render() {
    return [
      <div>
        <h2>类组件</h2>
      </div>,
       <div>
       <h2>类组件2</h2>
     </div>,
    ];
  }
}

---

类组件生命周期

常见的生命周期,装载阶段、更新阶段、卸载阶段
1.constructor

• 可以实现也可以不实现
• 初始化state
• 为事件绑定实例(this)

2.componentDidMount

• 依赖于DOM的操作在这进行
• 在此发送网络请求
• 在此添加一些订阅

3.componentDidUpdate

• 组件更新后立即被触发
• 首次渲染不会被触发

4.componentWillUnmount

• 执行必要的清理操作
• 清除Timer，取消网络请求，清除订阅

不常见的生命周期
1.getDerivedStateFromProps，state的值在任何时候都依赖于props；方法返回一个对象更新state；
2.getSnapshotBeforeUpdate ，更新前的回调，获取DOM更新前的信息（比如滚动位置）
3.shouldComponentUpdate ,优化性能时候经常用到

生命周期演示

//app.js

import React, {Component} from 'react';
export default class App extends Component{
  constructor(){
    console.log("执行constructor");
    super();
    this.state={
      counter:10,
      flag:true
    }
    this.addNum=this.addNum.bind(this);
  }
  render(){
    return  (
    <div>
      <h2>App组件:{this.state.counter}</h2>
      <button onClick={this.addNum}>加1</button>
      <hr/>
       {this.state.flag && <Childtest/>}
    </div>
    )
  }
  addNum(){
    this.setState({
      counter:this.state.counter+1,
      flag:!this.state.flag
    })
  }
  componentDidMount() {
    console.log("执行了componentDidMount");
  }
  componentDidUpdate(prevProps, prevState) {
    console.log("执行了componentDidUpdate");
  }
}
class Childtest extends Component {
  render() {
    return (
      <div>
        <h2>我是子组件</h2>
      </div>
    )
  }
  componentWillUnmount() {
    console.log("子组件执行了componentWillUnmount");
  }
}

---

组件通信:

我们知道组件之间是可以相互嵌套的，那么他们之间如何通信？
父子组件:

• 父传子(类组件)通信

• 父传子(函数组件)通信

  
  父传子

//app.js
import React, { Component } from "react";
export default class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <div>
        <h2>App组件</h2>
        <hr />
        <Childtest name="张三" age="18" heigt={1.88} />
        <Childtest name="李四" age="19" heigt={1.89} />
        <hr />
        <Childtest2 name="王五" age="20" heigt={1.79} />
      </div>
    );
  }
}
class Childtest extends Component {
  //1、所有的属性都在props中，这是最完整的写法
  // constructor(props){
  //   super();
  //   this.props=props;
  // }

  //2、实际上是父类保存了props(Component源码有写)，子类继承直接使用,不是通过super.props,依然还是用this.props使用
  // constructor(props){
  //   super(props);
  // }

  //3、子类默认的构造方法就是上面那样实现的，所有可以直接省略
  render() {
    const { name, age, heigt } = this.props;
    return (
      <div>
        <h2>我是类子组件:</h2>
        <h3>
          {name}---{age}--{heigt}
        </h3>
      </div>
    );
  }
}

function Childtest2(props) {
  const { name, age, heigt } = props;
  return (
    <div>
      <h2>我是函数子组件:</h2>
      <h3>
        {name}---{age}--{heigt}
      </h3>
    </div>
  );
}

---

传值参数propTypes验证:

• 引入prop-types库
• 函数组件与类组件可添加propTypes设置验证规则，不通过规则则会控制台报警告
• 没有传值时，可设置默认值

• 类组件还可以通过static关键字来单独设置propTypes

  
  验证不通过报错示意图

import React, { Component } from "react";
import PropTypes from 'prop-types';
export default class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <div>
        <h2>App组件</h2>
        <hr />
        <Childtest name="张三" age={18} heigt={1.88} />
        <Childtest name="李四" age="19" heigt={1.89} />
        <Childtest/>
        <hr />
        <Childtest2 name="王五" age="20" heigt={1.79} />
        <Childtest2 name="王五2" age={21} heigt={1.79} />
      </div>
    );
  }
}
class Childtest extends Component {
  render() {
    const { name, age, heigt } = this.props;
    return (
      <div>
        <h2>我是类子组件:</h2>
        <h3>
          {name}---{age}--{heigt}
        </h3>
      </div>
    );
  }
 //es6中class fields写法
  static propTypes={
    age:PropTypes.number
  }
 // 注释掉下面的就会报错,可以看到props的验证效果
 static defaultProps={
        age:66
    }
}
// 非static用法
Childtest.propTypes={
  name:PropTypes.string.isRequired,
}
Childtest.defaultProps={
  name:'默认小张',
  age:25,
  heigt:2.0
}

function Childtest2(props) {
  const { name, age, heigt } = props;
  return (
    <div>
      <h2>我是函数子组件:</h2>
      <h3>
        {name}---{age}--{heigt}
      </h3>
    </div>
  );
}
Childtest2.propTypes={
  name:PropTypes.string.isRequired,
  age:PropTypes.number,
  heigt:PropTypes.number
}