一、创建方法
import React from 'react';
class B extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>hi</div>
)
}
}
export default B;
Props传入外部数据
class B extends React.Component {
constructor(props) {
super(props);
}
//初始化
render(){
return <div onClick={this.props.onClick}>
{this.props.name}
<div>
{this.props.children}
</div>
</div>
//读取数据
}
}
Props的作用
一、接受外部数据
- 只能读不能写
- 外部数据由父组件传递
二、接受外部函数
- 在恰当的时机，调用该函数
- 该函数一般是父组件的函数
State & setState 内部数据
初始化State
class B extends React.Component {
constructor(props) {
super(props);
this.state ={
user: {name:'frank',age:18}
}
render(){/* ...*/}
}
读写State
读用 this.state
this.state.xxx.yyy.zzz
写用 this.setState(???,fn)
- this.setState(newState,fn)
- this.setState((state,props)=> newState,fn)
注意：setState 不会立刻改变this.state ，会在当前代码运行完后，再去更新this.state，从而触发UI更新
setState会自动将新state与旧state 进行一级合并
生命周期
constructor()
用途
- 初始化props
- 初始化state，但此时不能调用setState
shouldComponentUpdate()
return false 阻止更新 \
shouldComponentUpdate(newProps, newState){
if(newState.n ==== this.state.n){
return false
}else{
return true
}
}
用途：
- 返回true表示不阻止UI更新
- 返回false表示阻止UI更新
问：
shouldComponentUpdate有么用
答：它允许我们手动判断是否要进行组件更新，我们可以根据应用场景灵活地设置返回值，以避免不必要的更新
但也可以直接使用React.PureComponent
render()
创建虚拟DOM
用途：
- 展示视图
- 只能有一个根元素
- 如果有两个根元素，就要用
<React.Fragment>包起来 <React.Fragment>可以缩写成<></>技巧：- render里面可以写if...else
- render里面可以写? :表达式
- render里面不能直接写for循环，需要用数组
- render里面可以写array.map（循环）
componentDidMount()
组件已出现在页面
用途：
- 在元素插入页面后执行代码，这些代码依赖DOM
- 比如你想获取div的高度，就最好在这里写
- 此处可以发起加载数据的AJAX请求（官方推荐）
- 首次渲染会执行此钩子
componentDidUpdate()
组件已更新
用途：
- 在视图更新后执行代码
- 此处也可以发起AJAX请求，用于更新数据
- 首次渲染不会执行此钩子
- 在此处setState可能会引起无限循环，除非放在if里
- 若shouldComponentUpdate返回false，则不触发钩子
componentWillUnmount()
组件将死
用途：
- 组件将要被移出页面然后被销毁时执行代码
- unmount过的组件不会再次mount
