- class组件的创建方式
- 类组件中props的使用
- 类组件中state的使用
- 类组件的生命周期
1. class组件的创建方式
class组件也叫作类组件,有两种创建方式,第一种为Es5,第二中试Es6方式.
- Es5创建方式
import React from "react"
const A = React.createClass({
render(){
return (
<div>hello wrold</div>
)
}
})
export default A- Es6创建方式
import React from "react"
class B extends React.Component{
constructor(props){
super(props)
}
render(){
retrun (
<div>hello wrold</div>
)
}
}
export default B;2. 类组件中props的使用
props外部数据,指的是父组件传递给子组件的值或者函数, ==注意:props中不允许子组件修改父组件的值==
import React from "react"
class App extends React.Component {
constructor(porps){
super(porps)
this.state ={
num:0
}
};
add = ()=>{
this.state((state)=>({state.num:num+1}))
}
render(){
return(
<div>
APP
<P>{this.state.num}</p>
<button onClick={this.add}>add</button>
<Child number={this.state.num}></Child>
</div>
)
}
}
class Child exentds Reach.Component{
constructor(props){
super(props)
}
render(){
return(
<div>子组件的值{this.props.number}</div>
)
}
}- componentWillReceiveProps(newProps,newContext)钩子
- 当前接受新的props时,会触发次方法(新版react中已经弃用)
- 接受两个参数,第一个参数是变化后的props的值
class Child exentds Reach.Component{
UNSAFE_componentWillReceiveProps(newProps,newContext)
constructor(props){
super(props)
}
render(){
return(
<div>子组件的值{this.props.number}</div>
)
}
}3. 类组件中state的使用(state内部数据)
- 初始化
class Child exentds Reach.Component{
constructor(props){
super(props)
this.state = {
userInfo:{
name:"李雷",
age:'18'
}
}
}
render(){
return(
<div>姓名: {this.state.userInfo.name}</div>
)
}
}
- setState的执行时机和推荐写法
- this.setState(newState,fn) 接受两个参数,第一个参数接受被修改的对象,第二个参数是修改成功的回调
- setState会自动将state与旧state进行一级合并 ==注意:setState不会立刻改变this.state,会在当前代码运行后,在去更新this.state,从而触发UI更新== 推荐写法
class Child exentds Reach.Component{
constructor(props){
super(props)
this.state = {
userInfo:{
name:"李雷",
age:'18'
}
}
}
test= ()=>{
this.setState((state)=>({state.userInfo.name = "韩梅梅"}))
}
render(){
return(
<div>
姓名: {this.state.userInfo.name}
<button onClick={this.test}>test</button>
</div>
)
}
}
4. reatc的生命周期
- constructor
- 用途: 初始化state,此时不能调用setState
- render
- 执行时机： 1. setState() 2. forceUpdate() (强制更新) 3. 组件接收新的 props
- return需要在最外层包一层块级元素
- <></>===<React.Fragment></React.Fragment>===<div></div>
- 技巧
- 可以写if…else
- 可以写三目运算
- 可以写for循环
- 可以写array.map
- shouldComponentUpdate
- 用途: 返回一个bool值,表示是否阻止UI更新(返回true表示不阻止更新)
- shouldComponentUpdate(newProps,newState),包含两个参数分别是新的props和state的值
class App extends React.Component {
constructor(porps){
super(porps)
this.state ={
num:0
}
};
add = ()=>{
this.state((state)=>({state.num:num+1}))
},
shouldComponentUpdate(newProps,newState){
//生命周期函数,用于监听state和props的值是否变化,返回false和true决定是否渲染视图
return !(newState.n === this.state.n)
}
render(){
return(
<div>
APP
<P>{this.state.num}</p>
<button onClick={this.add}>add</button>
</div>
)
}
}- react内置了此方法 使用：
class app extends React.PureComponent {}
- componentDidMount
- 元素已经挂载
- 可以发起AJAX请求(官方推荐)
- 首次渲染会执行钩子
class App extends React.Component {
constructor(porps){
super(porps)
//内部属性命名dom元素id
this.divRef = React.createRef()
};
componentDidMount(){
const div = this.divRef.current;
console.log(div)
}
render(){
return(
<div ref={this.divRef}>hello world</div>
)
}
}- componentDidUpdate
- 用途 视图更新后执行代码
- 此处可以使用AJAx请求更新数据
- 首次不会执行钩子
- 在此处setState可能会引起无限循环
- 如果shouldComponentUpdate返回false,则不会触发
- componentWillUnmoun
- 用途 组件将要移除页面然后被销毁时执行代码
- unmount过的组件不会再次挂载