React 面向组件编程知识

React 面向组件编程

基本理解和使用

效果

image.png

自定义组件(Component) :

1. 定义组件(2 种方式)

/*方式 1: 工厂函数组件(简单组件)*/  
function MyComponent () {  
    return <h2>工厂函数组件(简单组件)</h2>  
}  
/*方式 2: ES6 类组件(复杂组件)*/
class MyComponent2 extends React.Component {  
    render () {  
        console.log(this) // MyComponent2的实例对象  
        return <h2>ES6 类组件(复杂组件)</h2>  
    }  
}

1. 渲染组件标签

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

注意

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

render()渲染组件标签的基本流程

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

组件三大属性 1: state

理解

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
})

组件三大属性 2: props

理解

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

作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意: 组件内部不要修改 props 数据

编码操作

// 1) 内部读取某个属性值  
this.props.propertyName  
// 2) 对 props 中的属性值进行类型限制和必要性限制  
Person.propTypes = {  
    name: React.PropTypes.string.isRequired,  
    age: React.PropTypes.number.isRequired  
}  
// 3) 扩展属性: 将对象的所有属性通过 props 传递  
<Person {...person}/>  
// 4) 默认属性值  
Person.defaultProps = {  
    name: 'Mary'  
}  
5) 组件类的构造函数  
constructor (props) {  
    super(props)  
    console.log(props) //  查看所有属性  
}

组件的 props 和 state 属性的区别

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

组件三大属性 3: refs 与事件处理

理解

1. 组件内的标签都可以定义 ref 属性来标识自己 a. <input type="text" ref={input => this.msgInput = input}/> b. 回调函数在组件初始化渲染完或卸载时自动调用
2. 在组件中可以通过 this.msgInput 来得到对应的真实 DOM 元素
3. 作用: 通过 ref 获取组件内容特定标签对象, 进行读取其相关数据

事件处理

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

handleFocus(event) {  
    event.target // 返回 input对象  
}

注意

1. 组件内置的方法中的 this 为组件对象
2. 在组件类中自定义的方法中 this 为 null a. 强制绑定 this: 通过函数对象的 bind() b. 箭头函数(ES6 模块化编码时才能使用)

组件的组合

功能界面的组件化编码流程

1. 拆分组件: 拆分界面,抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件 a. 动态显示初始化数据 b. 交互功能(从绑定事件监听开始)

收集表单数据

1. 问题: 在 react 应用中, 如何收集表单输入数据
2. 包含表单的组件分类 a. 受控组件: 表单项输入数据能自动收集成状态 b. 非受控组件: 需要时才手动读取表单输入框中的数据

组件生命周期

1. 组件对象从创建到死亡它会经历特定的生命周期阶段
2. React 组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
3. 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

生命周期流程图

image.png

生命周期详述

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

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

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

• componentWillMount()
• componentDidMount()
• componentWillUpdate()
• componentDidUpdate()
• componentWillUnmount()

1. 生命周期流程: a. 第一次初始化渲染显示: ReactDOM.render()

• constructor(): 创建对象初始化 state
• componentWillMount() : 将要插入回调
• render() : 用于插入虚拟 DOM 回调
• componentDidMount() : 已经插入回调 b. 每次更新 state: this.setSate()
• componentWillUpdate() : 将要更新回调
• render() : 更新(重新渲染)
• componentDidUpdate() : 已经更新回调 c. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)
• componentWillUnmount() : 组件将要被移除回调

重要的钩子

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