1.基本理解与使用

1.1自定义组件

• 1>定义组件（2 种方式）
  /*方式1: 工厂函数组件(简单组件)*/

function MyComponent () {
  return <h2>工厂函数组件(简单组件)</h2>
}

/*方式2: ES6类组件(复杂组件)*/

class MyComponent2 extends React.Component {
  render () {
    console.log(this) // MyComponent2的实例对象
    return <h2>ES6类组件(复杂组件)</h2>
  }

• 2> 渲染组件标签

 ReactDOM.render(<MyComponent/>,document.getElementById('example1'))
 ReactDOM.render(<MyComponent2/>,document.getElementById('example2'))

效果：

image.png

注意：

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

2.组件的三大属性

一、satte

理解：

1. state是组件对象最重要的属性, 值是对象(可以包含多个数据)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

编码操作:

1. 初始化状态:

  constructor (props) {
    super(props)
    this.state = {
      stateProp1 : value1,
      stateProp2 : value2
    }
  }

2. 读取某个状态值

  this.state.statePropertyName

3. 更新状态---->组件界面更新

  this.setState({
    stateProp1 : value1,
    stateProp2 : value2
  })

二、props

理解：

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中

编码操作：

1. 内部读取某个属性值

this.props.propertyName

2. 对 props 中的属性值进行类型限制和必要性限制

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

3. 扩展属性: 将对象的所有属性通过props传递

<Person {...person}/>

 //   ...作用：
 //   1.打包
 //  function fn(...as){} fn(1,2,3)
//    2.解包
 //   const arr1=[1,2,3] const arr2=[6,...arr1,9]
   

4. 默认属性值

Person.defaultProps = {
name: 'Mary'
}

5. 组件类的构造函数

constructor (props) {
super(props)
console.log(props) // 查看所有属性
}

面试题

问题: 请区别一下组件的 props 和 state 属性

1. state: 组件自身内部可变化的数据
2. props: 从组件外部向组件内部传递数据, 组件内部只读不修改

三、refs

理解：

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

  <input type="text" ref={input=>this.input=input}/>

• 2.在组件中可以通过 this.input 来得到对应的真实 DOM 元素

• 3.作用：通过 ref 获取组件内容特定标签对象，进行读取其相关数据

事件处理：

1. 通过 onXxx 属性指定组件的事件处理函数(注意大小写)

a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

2. 通过 event.target 得到发生事件的DOM元素对象

<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target  //返回input对象
}

3.组件的组合

组件化编写功能流程:

• 1.拆分组件

• 2.实现静态组件（只有静态界面，没有动态数据和交互）

• 3.实现动态组件

  a. 实现初始化数据动态显示
  b. 实现交互功能

4.收集表单数据

• 1) 问题: 在react应用中, 如何收集表单输入数据

• 2) 包含表单的组件分类

a. 受控组件: 表单项输入数据能自动收集成状态

  handleChange(event){
        //读取输入的值
        const pwd=event.target.value
        //更新 pwd 的状态
        this.setState({pwd})
     }

<input type=
b.  非受控组件: 需要时才手动读取表单输入框中的数据

<input type="text" ref={input=>this.nameinput=input}/>

"password" value={this.state.pwd} onChange={this.handleChange} />

阻止事件的默认行为：

 event.preventDefault()

5.组件生命周期

5.1 生命周期详述

1) 组件的三个生命周期状态:

* Mount：插入真实 DOM
* Update：被重新渲染
* Unmount：被移出真实 DOM

2) React 为每个状态都提供了勾子(hook)函数

* componentWillMount()
* componentDidMount()
* componentWillUpdate()
* componentDidUpdate()
* componentWillUnmount()

3) 生命周期流程:

a. 第一次初始化渲染显示: ReactDOM.render()

  * constructor(): 创建对象初始化state
  * componentWillMount() : 将要插入回调
  * render() : 用于插入虚拟DOM回调
  * componentDidMount() : 已经插入回调

b. 每次更新state: this.setSate()

  * componentWillUpdate() : 将要更新回调
  * render() : 更新(重新渲染)
  * componentDidUpdate() : 已经更新回调

c. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)

  * componentWillUnmount() : 组件将要被移除回调

5.2 重要的勾子

1. render(): 初始化渲染或更新渲染调用
2. componentDidMount(): 开启监听, 发送ajax请求
3. componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
4. componentWillReceiveProps(): 后面需要时讲