react学习四：React组件

在react学习二： JSX语法的使用这篇文章中有react组件创建的两种方式

组件的生命周期:

概念：

在组件创建、到加载到页面上运行、以及组件被销毁的过程中，总是伴随着各种各样的事件，这些在组件特定时期，触发的事件，统称为 组件的生命周期

组件生命周期分为三部分：

组件创建阶段：组件创建阶段的生命周期函数，有一个显著的特点：创建阶段的生命周期函数，在组件的一辈子中，只执行一次；

componentWillMount: 组件将要被挂载，此时还没有开始渲染虚拟DOM

render：第一次开始渲染真正的虚拟DOM，当render执行完，内存中就有了完整的虚拟DOM了

componentDidMount: 组件完成了挂载，此时，组件已经显示到了页面上，当这个方法执行完，组件就进入都了 运行中 的状态

组件运行阶段：也有一个显著的特点，根据组件的state和props的改变，有选择性的触发0次或多次；

componentWillReceiveProps: 组件将要接收新属性，此时，只要这个方法被触发，就证明父组件为当前子组件传递了新的属性值；

shouldComponentUpdate: 组件是否需要被更新，此时，组件尚未被更新，但是，state 和 props 肯定是最新的

componentWillUpdate: 组件将要被更新，此时，尚未开始更新，内存中的虚拟DOM树还是旧的

render: 此时，又要重新根据最新的 state 和 props 重新渲染一棵内存中的 虚拟DOM树，当 render 调用完毕，内存中的旧DOM树，已经被新DOM树替换了！此时页面还是旧的

componentDidUpdate: 此时，页面又被重新渲染了，state 和 虚拟DOM 和 页面已经完全保持同步

组件销毁阶段：也有一个显著的特点，一辈子只执行一次；

componentWillUnmount: 组件将要被卸载，此时组件还可以正常使用；

defaultProps：

在组件创建之前，会先初始化默认的props属性，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 constructor 构造器中的 this.state = {}，来初始化组件的状态。

在封装一个组件的时候，组件内部，肯定有一些数据是必须的，哪怕用户没有传递一些相关的启动参数，这时候，组件内部 ，尽量 给自己提供一个默认值；在 React 中，使用静态的 defaultProps 属性，来设置 组件的 默认属性值

设置 组件的 默认属性值有以下两种方式：

方式一：外界传递 initcount：

<Counter initcount={0}></Counter>

方式二：使用defaultProps设置组件的默认值：

  static defaultProps = {
    initcount: 0 
  }

以上两种方式都是通过this.props.initcount来使用这个默认值

propTypes：

把 外界传递过来的属性，做类型校验

如果要为 传递过来的属性做类型校验，必须安装 React 提供的 第三方包，叫做 prop-types ;

prop-types 大概在 v.15.* 之前，并没有单独抽离出来，那时候，还和 react 包 在一起；后来， 从 v.15.* 之后，官方把类型校验的 模块，单独抽离为 一个包，就叫做 prop-types

yarn add prop-types

导入包：

import ReactTypes from 'prop-types'

ctrl+鼠标右击ReactTypes，查看包：

可以限制的属性的默认类型为number、string等等

限制initcount的数据类型为number

  static propTypes = {
    initcount: ReactTypes.number // 使用 prop-types 包，来定义 initcount 为 number 类型
  }

当把initcount的默认值改为一个字符串的时候会出现如下报错：

componentWillMount函数：

在组件即将挂载到页面上的时候执行，此时组件尚未挂载到页面中，内存中的虚拟DOM也还没有创建，因此此时无法获取到页面上的任何元素，因为虚拟DOM和页面都还没有开始渲染，在这个阶段中，不能去操作页面上的DOM元素，这个函数，等同于 Vue 中的 created 生命周期函数

子组件的虚拟DOM内容：

  render() {
    return <div>
      <h1>这是 Counter 计数器组件</h1>
      <input type="button" value="+1" id="btn" onClick={this.increment} />
      <hr />
      <h3 id="myh3" ref="h3">当前的数量是：{this.state.count}</h3>
    </div>
  }

自定义一个函数：

  myselfFunc() {
    console.log('这是我自己定义的函数，和生命周期函数无关');
  }

componentWillMount():

  componentWillMount() {
    console.log(document.getElementById('myh3'));
    console.log(this.props.initcount);
    console.log(this.state.msg);
    this.myselfFunc()
  }

render函数：

当执行到 这个 生命周期函数的时候，即将要开始渲染内存中的 虚拟DOM了，当这个函数执行完，内存中就有了一个 渲染好的虚拟DOM，但是，页面上并没有真正显示DOM元素

  render() {
    console.log(document.getElementById('myh3'));
    return <div>
      <h1>这是 Counter 计数器组件</h1>
      <input type="button" value="+1" id="btn" onClick={this.increment} />
      <hr />
      <h3 id="myh3" ref="h3">当前的数量是：{this.state.count}</h3>
    </div>
  }

componentDidMount函数：

当组件挂载到页面上之后，会进入这个生命周期函数，只要进入这个生命周期函数了，说明页面上已经有可见的DOM元素了，当组件执行完 componentDidMount 函数后，就进入到了 运行中的状态，所以，componentDidMount 是创建阶段的最后一个函数，在这个函数中，可以去操作页面上需要使用的 DOM 元素，如果想操作DOM元素，最早只能在 componentDidMount 中进行，componentDidMount 相当于 Vue 中的 mounted 函数

  componentDidMount() {
    console.log(document.getElementById('myh3'));
  }

在componentDidMount函数中使用原生的js事件绑定机制，使得点击button元素能够使组件私有数据count的数值加一

  componentDidMount() {
    // 这里一定要使用箭头函数，如果直接使用function，函数里面的this指向会指向id为btn的元素，而不是组件
    document.getElementById('btn').onclick = () => {
      console.log('ok');
      console.log(this);
      // props里面的属性只读不可写，而state里面的属性可读可写，所以需要把initCount的值传给state里面的count
      // this.props.initcount++
      // 修改组件私有数据
      this.setState({
        count: this.state.count + 1
      })
    }
  }

但是上面这次事件绑定机制不推荐使用，推荐使用react提供的事件绑定机制

  render() {
    return <div>
      <h1>这是 Counter 计数器组件</h1>
      <input type="button" value="+1" id="btn" onClick={this.increment}/>
      <hr />
      <h3 id="myh3" ref="h3">当前的数量是：{this.state.count}</h3>
    </div>
  }
  // 一定要使用箭头函数，this指向问题
  increment = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

shouldComponentUpdate函数：

可以用来判断组件是否需要更新

在 shouldComponentUpdate 中要求必须返回一个布尔值，如果返回的值是 false，则 不会继续执行后续的生命周期函数，而是直接退回到了 运行中 的状态，此时有序 后续的 render 函数并没有被调用，因此，页面不会被更新，但是， 组件的 state 状态，却被修改了

  shouldComponentUpdate(nextProps, nextState) {
    console.log(this.state.count);
    return false
  }

如上图可见，当shouldComponentUpdate返回false，点击button后this.state.count的值并没有被渲染到页面上面去，而且通过 this.state.count 拿到的值，是上一次的旧数据，并不是当前最新的，要获取最新的数据就需要通过nextState

假如我们要实现需求：如果 state 中的 count 值是偶数，则 更新页面，如果 count 值 是奇数，则不更新页面

 shouldComponentUpdate(nextProps, nextState) {
    console.log(this.state.count + ' ---- ' + nextState.count);
    return nextState.count % 2 === 0 ? true : false
 }

componentWillUpdate函数：

组件将要更新，此时尚未更新，在进入这个 生命周期函数的时候，内存中的虚拟DOM是旧的，页面上的 DOM 元素 也是旧的

  componentWillUpdate() {
    console.log(document.getElementById('myh3').innerHTML)
    // console.log(this.refs.h3.innerHTML);
  }

render函数（运行阶段，其实和创建阶段的同一个函数）：

在 组件运行阶段中，每当调用 render 函数的时候，页面上的 DOM元素，还是之前旧的

  render() {
    // 会报错，因为此时虚拟dom还没有被渲染到页面上去所以取不到innerHTMl
    // console.log( this.refs.h3.innerHTML);
    console.log(this.refs.h3 && this.refs.h3.innerHTML);
    return <div>
      <h1>这是 Counter 计数器组件</h1>
      <input type="button" value="+1" id="btn" onClick={this.increment}/>
      <hr />
      <h3 id="myh3" ref="h3">当前的数量是：{this.state.count}</h3>
    </div>
  }

componentDidUpdate函数：

组件完成了更新，此时，state 中的数据、虚拟DOM、页面上的DOM，都是最新的

  componentDidUpdate(prevProps,prevState) {
    console.log(this.refs.h3.innerHTML);
  }

componentWillReceiveProps函数：

组件将要接收外界传递过来的新的 props 属性值会触发该函数，当子组件第一次被渲染到页面上的时候，不会触发这个 函数，只有当父组件中，通过某些事件，重新修改了传递给子组件的props数据之后，才会触发 componentWillReceiveProps

import React from 'react'
// 父组件
export default class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      msg: '这是父组件中的 msg 消息'
    }
  }
  render() {
    return <div>
      <h1>这是父组件</h1>
      <input type="button" value="点击修改父组件的 MSG" onClick={this.changeMsg} />
      <hr />
      <Son pmsg={this.state.msg}></Son>
    </div>
  }
  changeMsg = () => {
    this.setState({
      msg: '修改了父组件中的msg消息'
    })
  }
}
// 子组件
class Son extends React.Component {
  constructor(props) {
    super(props)

    this.state = {}
  }
  render() {
    return <div>
      <h3>这是子组件 --- {this.props.pmsg}</h3>
    </div>
  }
  componentWillReceiveProps(nextProps) {
    console.log('被触发了');
    // 注意： 在 componentWillReceiveProps 被触发的时候，如果我们使用 this.props 来获取属性值，这个属性值，不是最新的，是上一次的旧属性值
    // 如果想要获取最新的属性值，需要通过 componentWillReceiveProps 的参数列表来获取
    console.log(this.props.pmsg + ' ---- ' + nextProps.pmsg);
  }
}

React中绑定this并传参的三种形式

  constructor(props) {
    super(props)

    this.state = {
      msg: '这是默认的msg'
    }
  }

  render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>
      <hr />
      <h3>{this.state.msg}</h3>
    </div>
  }

方式一：

在 事件处理函数中，直接使用 bind 绑定 this 并传参

bind 的作用： 为前面的函数，修改函数内部的 this 指向，让 函数内部的this，指向 bind 参数列表中的 第一个参数
bind 和 call/apply 之间的区别：
 call/apply 修改完this指向后，会立即调用前面的函数，但是 bind 只是修改this指向，并不会调用 
注意： bind 中的第一个参数，是用来修改 this 指向的，第一个参数后面的所有参数，都会当作将来调用 前面函数 时候的参数传递进去 

render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>
<input type="button" value="绑定this并传参的方式1" onClick={this.changeMsg1.bind(this, '?', '?')} />
      <hr />
      <h3>{this.state.msg}</h3>
    </div>
}

  changeMsg1(arg1, arg2) {
    // 注意：这里的方式，是一个普通方法，因此，在触发的时候，这里的 this 是 undefined
    // console.log(this);
    this.setState({
      msg: '绑定this并传参的方式1' + arg1 + arg2
    })
  }

方式二：

在构造函数中绑定并传参

当为一个函数，调用 bind 改变了this指向后，bind 函数调用的结果，有一个返回值，这个值，就是被改变this指向后的函数的引用；
 bind 不会修改 原函数的 this 指向

  constructor(props) {
    super(props)

    this.state = {
      msg: '这是默认的msg'
    }
    this.changeMsg2 = this.changeMsg2.bind(this, '?', '?')
  }

  render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>
      <input type="button" value="绑定this并传参的方式2" onClick={this.changeMsg2} />
      <hr />
      <h3>{this.state.msg}</h3>
    </div>
  }

  changeMsg2(arg1, arg2) {
    // console.log(this);
    // 注意：这里的方式，是一个普通方法，因此，在触发的时候，这里的 this 是 undefined
    this.setState({
      msg: '绑定this并传参的方式2' + arg1 + arg2
    })
  }

方式三：

用箭头函数绑定this并传参，this.changeMsg3()的这个this与箭头函数外部的this是一样的，这是箭头函数的特性

  render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>
      <input type="button" value="绑定this并传参的方式3" onClick={() => { this.changeMsg3('?', '?') }} />
      <hr />
      <h3>{this.state.msg}</h3>
    </div>
  }

  changeMsg3(arg1, arg2) {
    // console.log(this);
    // 注意：这里的方式，是一个普通方法，因此，在触发的时候，这里的 this 是 undefined
    this.setState({
      msg: '绑定this并传参的方式3' + arg1 + arg2
    })
  }

除此之外，还有一个变形，就是讲changgeMsg3变成箭头函数，就像之前counter计数器那个案例一样

  render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>
      <input type="button" value="绑定this并传参的方式3" onClick={this.changeMsg3('?', '?') } />
      <hr />
      <h3>{this.state.msg}</h3>
    </div>
  }

  changeMsg3 = (arg1, arg2) => {
    // console.log(this);
    // 注意：这里的方式，是一个普通方法，因此，在触发的时候，这里的 this 是 undefined
    this.setState({
      msg: '绑定this并传参的方式3' + arg1 + arg2
    })
  }

会发现有报错：

原因是现在的触发事件函数是需要传参的，但解析到onclick事件时会去执行{}里面的jsx代码发现{this.changeMsg3('?', '?')就会直接运行这个函数，但在我们的counter计数器案例里面是没有传参的直接就是onClick={this.increment}，所以就不会存在问题

解决办法:

  render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>
      <input type="button" value="绑定this并传参的方式3" onClick={() => { this.changeMsg3('?', '?') }} />
      <hr />
      <h3>{this.state.msg}</h3>
    </div>
  }

react中的数据双向绑定：

在 Vue 中，有 v-model 指令来实现双向数据绑定，但是，在 React 中， 根本没有指令的概念，因此React 默认也不支持 双向数据绑定
React 只支持，把数据从 state 上传输到 页面，但是，无法自动实现数据从 页面 传输到 state 中 进行保存，也就是，React 不支持数据的自动逆向传输， 只是实现了数据的单向绑定 
如果为 表单元素，提供了 value 属性绑定，那么，必须同时为 表单元素 绑定 readOnly, 或者提供要给 onChange 事件
如果提供了readOnly，表示这个元素只读的不能被修改

<input type="text" style={{ width: '100%' }} value={this.state.msg} readOnly />

如果提供了onChange 表示，这个元素的值可以被修改，但是，要自己定义修改的逻辑 
如果两者都不提供则会报错

<input type="text" style={{ width: '100%' }} value={this.state.msg} />

  render() {
    return <div>
      <h1>绑定This并传参的几种方式</h1>
      <input type="button" value="绑定this并传参的方式1" onClick={this.changeMsg1.bind(this, '?', '?')} />
      <input type="button" value="绑定this并传参的方式2" onClick={this.changeMsg2} />
      <input type="button" value="绑定this并传参的方式3" onClick={() => { this.changeMsg3('?', '?') }} />
      <hr />
      <h3>{this.state.msg}</h3>
      <input type="text" style={{ width: '100%' }} value={this.state.msg} onChange={this.txtChanged} ref="txt" /> 
    </div>
  }

 

为 文本框 绑定 txtChanged 事件

  txtChanged = (e) => {
    this.setState({
      msg: e.target.value
    })
  }

获取文本框中 最新文本的3种方式：
 使用 document.getElementById 来拿
 使用 ref 来拿
console.log(this.refs.txt.value);
使用 事件对象的 参数 e 来拿   e.target 就表示触发 这个事件的 事件源对象，得到的是一个原生的JS DOM 对象
console.log(e.target.value);

扩展：父组件使用Context特性

父组件给子孙组件传值，一般是按照下面的这种方式：

// 最外层的父组件
export default class Com1 extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      color: 'red'
    }
  }
  render() {
    return <div>
      <h1>这是 父组件 </h1>
      <Com2 color={this.state.color}></Com2>
    </div>
  }
}
// 中间的子组件
class Com2 extends React.Component {
  render() {
    return <div>
      <h3>这是 子组件 </h3>
      <Com3 color={this.props.color}></Com3>
    </div>
  }
}
// 内部的孙子组件
class Com3 extends React.Component {
  render() {
    return <div>
      <h5 style={{ color: this.props.color }}>这是 孙子组件 </h5>
    </div>
  }
}

使用context特性会简化这个过程：

最外层的父组件：

export default class Com1 extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      color: 'red'
    }
  }
  render() {
    return <div>
      <h1>这是 父组件 </h1>
      <Com2></Com2>
    </div>
  }
}

在父组件中定义一个 function，这个function 有个固定的名称，叫做 getChildContext ，内部必须返回一个对象，这个对象，就是要共享给 所有子孙自建的数据

  getChildContext() {
    return {
      color: this.state.color
    }
  }

然后在父组件中使用 属性校验，规定一下传递给子组件的 数据类型， 需要定义 一个 静态的（static） childContextTypes（固定名称，不要改）

  static childContextTypes = {
    color: ReactTypes.string // 规定了 传递给子组件的 数据类型
  }

中间的子组件：

class Com2 extends React.Component {
  render() {
    return <div>
      <h3>这是 子组件 </h3>
      <Com3></Com3>
    </div>
  }
}

内部的孙子组件：

在孙子组件中也需要属性校验，去校验一下父组件传递过来的 参数类型

class Com3 extends React.Component {
  static contextTypes = {
    color: ReactTypes.string // 这里，如果子组件，想要使用 父组件通过 context 共享的数据，那么在使用之前，一定要先 做一下数据类型校验
  }

  render() {
    return <div>
      <h5 style={{ color: this.context.color }}>这是 孙子组件  ---  {this.context.color} </h5>

    </div>
  }
}

使用context特性需要记住一个方法、两个静态属性，记住这个getChildContextTypes单词组合就行

前三个为方法名getChildContext

后三个为父组件属性校验是需要用到的静态属性childContextTypes

后两个为孙子组件属性校验是需要用到的静态属性contextTypes