React学习笔记2：React面向组件编程

面向组件编程

概述

• 组件名必须首字母大写
• 虚拟DOM元素只能有一个根元素
• 虚拟DOM元素必须有结束标签

渲染类组件标签的基本流程

1. React内部会创建组件实例对象
2. 调用render()得到虚拟DOM，并解析为真实的DOM
3. 插入到指定的页面元素内部

组件的三大核心属性：state

定义

• state是组件对象最重要的属性，值是对象（可以包含多个key-value 的组合）
• 组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）

注意点

• 组件中render方法中的this为组件实例对象
• 组件自定义的方法中this为undefined，如何解决？
  • 强制绑定this：通过函数对象的bind()
  • 箭头函数
• 状态数据，不能直接修改或更新

组件的三大核心属性：props

定义

• 每个组件对象都会有props（properties的简写）属性
• 组件标签的所有属性都保存在props中

作用

• 通过标签属性从组件外向组件内传递变化的数据
• 组件内部不要修改props数据

编码操作

• 内部读取某个属性值

  this.props.name
  

• 对props中的属性值进行类型限制和必要性限制（使用prop-types库进行限制，【需要引入prop-types库】）

  Person.propTypes = {
      name: PropTypes.string.isRequired,
      age:PropTypes.number
  }
  

• 扩展属性：将对象的所有属性通过props传递

  <Person {...person}/>
  

• 默认属性

  Person.defaultProps = {
      age: 18,
      sex: '男'
  }
  

• 组件类的构造函数

  constructor(props){
      super(props)
      console.log(props)//打印所有的属性
  }
  

组件三大核心属性：refs与事件处理

定义

组件内的标签可以定义ref属性来标识自己

编码

• 字符串形式的ref

  <input ref="input1"/>
  

• 回调形式的ref

  <input ref={(c)=>{this.piput1=c}}
  

• createRef创建ref容器

  myRef = React.createRef()
  <input ref={this.myRef}/>
  

事件处理

• 通过onXxx属性指定事件处理函数(注意大小写)
  • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
  • React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
• 通过event.target得到发生事件的DOM元素对象

组件的生命周期

概述

• 组件从创建到死亡会经历一些特定的阶段
• React组件中包含一系列钩子函数（生命周期回调函数），会在特定的时刻调用
• 在定义组件时，会在特定的生命周期回调函数中，做特定的工作

生命周期流程图（新）

生命周期的三个阶段（新）

1. 初始化阶段：由ReactDOM.render()触发——初次渲染
   • construcror()
   • getDeriverdStateFromProps
   • render()
   • componentDidMount()：一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段：由组件内部this.setState()或父组件重新render触发
   • getDerivedStateFromProps
   • shouldComponentUpdate()
   • render()
   • getSnapshotBeforeUpdate
   • componentDidUpdate()
3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发
   • componentWillUnmount()：一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

重要的钩子

• render：初始化渲染或更新渲染调用
• componentDidMount：：开启监听，发送ajax请求
• componentWillUnmount：做一些收尾工作，如：清理定时器