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.组件的三大属性
一、state
理解：
- state是组件对象最重要的属性, 值是对象(可以包含多个数据)
- 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
编码操作:
- 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
- 读取某个状态值
this.state.statePropertyName
- 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
二、props
理解：
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
编码操作：
- 内部读取某个属性值
this.props.propertyName
- 对 props 中的属性值进行类型限制和必要性限制
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
- 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
// ...作用：
// 1.打包
// function fn(...as){} fn(1,2,3)
// 2.解包
// const arr1=[1,2,3] const arr2=[6,...arr1,9]
- 默认属性值
Person.defaultProps = {
name: 'Mary'
}
- 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}
面试题
问题: 请区别一下组件的 props 和 state 属性
- state: 组件自身内部可变化的数据
- props: 从组件外部向组件内部传递数据, 组件内部只读不修改
三、refs
理解：
- 1.组件内的标签都可以定义 ref 属性来标识自己
<input type="text" ref={input=>this.input=input}/>
2.在组件中可以通过 this.input 来得到对应的真实 DOM 元素
3.作用：通过 ref 获取组件内容特定标签对象，进行读取其相关数据
事件处理：
- 通过 onXxx 属性指定组件的事件处理函数(注意大小写)
a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
- 通过 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 重要的勾子
- render(): 初始化渲染或更新渲染调用
- componentDidMount(): 开启监听, 发送ajax请求
- componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
- componentWillReceiveProps(): 后面需要时讲
