组件基本结构
构造函数constructor
- 功能：子级继承父级的时候，通过构造函数获取父级的属性和方法，并通过super()传递的参数进行构造。
constructor(){super()}- 组件构造函数会在组件实例的时候最先调用！
constructor() {
super()
console.log('constructor 初始化数据')
}
组件
- 定义了组件继承于React的基本组件对象，一定要有自己的组件用于实例渲染。
- 组件通过render()方法渲染，返回一个html格式的组件以供渲染。
- 组件必须要用一个容器(div)包裹，不等各个元素节点都暴露在外面。
- 组件分为静态组件和有状态组件。有状态组件通过数据或逻辑控制组件里的内容显示，这些内容用state和setstate控制。
- 基本格式：
render() {
console.log('渲染')
return (
<div>
<h2>{"大括号里可以写js代码"}</h2>
<h2>Hello word</h2>
</div>
);
}
生命周期
- 我的实例使用脚手架创建的一个实例，脚手架使用点击跳转；
- 我的一个实例：
app.js
import React, {
Component
} from 'react';
class MyComponent extends Component {
constructor() {
super()
this.state = {
msg: 'Hello World'
}
console.log('constructor 初始化数据')
this.handleClick = this.handleClick.bind(this)
}
// 组件将要加载
componentWillMount() {
// 请求数据 异步操作
console.log('componentWillmount 组件将要加载')
}
// 组件加载完成
componentDidMount() {
console.log('componentDidMount 组件加载完成')
}
////////////////////////////////////////
// 运行中阶段（更新阶段）
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps 将要接收父组件传来的props', nextProps)
}
// 组件是不是应该更新 默认是返回true false
shouldComponentUpdate() {
console.log('shouldComponentUpdate 组件是不是应该更新')
return true;
}
// 组件将要更新
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate 组件将要更新', nextProps, nextState)
}
// 更新完成
componentDidUpdate() {
console.log('componentDidUpdate 更新完成')
}
// 即将销毁
componentWillUnmount() {
console.log('componentWillUnmount 即将销毁')
}
handleClick() {
this.setState({
msg: 'new Hello World'
})
}
// 渲染
render() {
console.log('渲染')
return (
<div>
<h2>{this.state.msg}</h2>
<h2>{this.props.abc}</h2>
<input type="button" defaultValue='更新数据' onClick={this.handleClick} />
</div>
);
}
}
class App extends Component {
constructor() {
super();
this.state = {
data: 'old props',
onOff: true
}
this.changeProps = this.changeProps.bind(this)
this.toggleChild = this.toggleChild.bind(this)
}
// 要进入第二阶段（更新阶段） 数据在发生变化
changeProps() {
this.setState({
data: 'new props 123456',
})
}
toggleChild() {
this.setState({
onOff: !this.state.onOff
})
}
render() {
return (
<div>
{
this.state.onOff ? <MyComponent abc={this.state.data}></MyComponent> : ''
}
<input type="button" defaultValue='更新props' onClick={this.changeProps} />
<input type="button" defaultValue='销毁组件' onClick={this.toggleChild} />
</div>
);
}
}
export default App;
运行时没有操作过程的页面
- 组件生命周期包含：即将加载、加载完成、更新、是否更新、即将更新、更新完成、即将销毁。
加载
即将加载：componentWillMount
- 在组件挂载之前调用，且全局只调用一次。如果在这个钩子里可以setState，render后可以看到更新后的state，不会触发重复渲染。该生命周期可以发起异步请求，并setState。
componentWillMount() {
// 请求数据 异步操作
console.log('componentWillmount 组件将要加载')
}
已经加载：componentDidMount
- 组件第一次渲染完成，此时dom节点已经生成。可以在这里调用ajax请求，进行进一步的数据交互，返回数据setState后组件会重新渲染。
componentDidMount() {
console.log('componentDidMount 组件加载完成')
}
- 至此，声明周期的第一个阶段完成，组件的demo出现在网页，如果有数据交互，那么第一次的数据已经初始化完成。
更新
该不该更新：shouldComponentUpdate
- 用于控制组件该不该更新的函数，在父组件更新引起子组件重新渲染的情况下使用较多。
// 组件是不是应该更新 默认是返回true false
shouldComponentUpdate() {
console.log('shouldComponentUpdate 组件是不是应该更新')
return true;
}
即将更新：componentWillUpdate(nextProps, nextState)
- shouldComponentUpdate返回true以后，组件进入重新渲染的流程，进入componentWillUpdate,这里同样可以拿到nextProps和nextState，多用于数据反馈处理等。
// 组件将要更新
componentWillUpdate(nextProps, nextState) {
console.log('componentWillUpdate 组件将要更新', nextProps, nextState)
}
更新完成：componentDidUpdate
组件接收到数据并渲染完成时触发。
组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期，这里可以拿到prevProps和prevState，即更新前的props和state。
// 更新完成
componentDidUpdate(prevProps, prevState) {
console.log('componentDidUpdate 更新完成', prevProps, prevState)
}
- demo点击更新数据结果:
更新阶段或者说运行中阶段：componentWillReceiveProps(nextProps)
- 在父组件调用子组件，给子组件更新数据的时候触发该方法，nextProps即是传递进来的数据。
父组件
//父组件
class App extends Component {
constructor() {
super();
this.state = {
data: 'old props',
onOff: true
}
this.changeProps = this.changeProps.bind(this)
this.toggleChild = this.toggleChild.bind(this)
}
// 要进入第二阶段（更新阶段） 数据在发生变化
changeProps() {
this.setState({
data: 'new props 123456',
})
}
toggleChild() {
this.setState({
onOff: !this.state.onOff
})
}
render() {
return (
<div>
{
this.state.onOff ? <MyComponent abc={this.state.data}></MyComponent> : ''
}
<input type="button" defaultValue='更新props' onClick={this.changeProps} />
<input type="button" defaultValue='销毁组件' onClick={this.toggleChild} />
</div>
);
}
}
点击更新props按钮的时候，将触发App父组件里的input，input点击触发changeState方法，state的数据被更改，由于组件基于数据驱动，那么涉及到state的组件都会被更新，则，子组件MyComponent会被更新，MyComponent更新时收到父组件传递Props影响触发运行时态声明周期函数。
同时，传递过来的数据也触发了更新状态的生命周期函数。
即将销毁
即将销毁：componentWillUnmount()
- 销毁组件后demo以及相关的事件等都会被销毁，这就是组件的强大之处，对于web性能有很大的改善！
- clear你在组建中所有的setTimeout,setInterval
- 移除所有组建中的监听 removeEventListener
- 也许你会经常遇到这个warning:
// 即将销毁
componentWillUnmount() {
console.log('componentWillUnmount 即将销毁')
}
