【React】高阶用法

默认参数

当未传入props时使用预设的默认值

使用静态属性defaultProps来定义props的默认值, 避免未传props报错的情况

1
2
3
static defaultProps = {
thing: "这是默认的props参数"
}

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// todoList.jsx
class TodoList extends Component {
constructor(props) {
super(props)
this.state = {
todoList: [
{ thing: '喝可乐' },
{ thing: '打游戏' },
// 故意留空一个
{ },
{ thing: '看电影' },
{ thing: '看剧' },
{ thing: '刷抖音' },
{ thing: '吃饭' }
]
}
}

render() {
const { todoList } = this.state
return (
<div className="wrap">
{
todoList.map( item => <TodoItem thing={item.thing} />)
}
</div>
)
}
}

// todoItem.jsx
class TodoItem extends Component {
constructor(props) {
super(props)
}
static defaultProps = {
thing: "这是默认的props参数"
}
render() {
return (
<div>
{ this.props.thing }
</div>
)
}
}

实际显示:
props默认值

自由的render返回值类型

render函数的要求没有以前严格了, 不用固定返回dom 以及 免除必须使用()包裹

返回dom

1
2
3
4
5
class Demo extends Component {
render() {
return <div>Hello React</div>
}
}

返回字符串

1
2
3
4
5
class Demo extends Component {
render() {
return 'Hello React'
}
}

返回数组

1
2
3
4
5
6
7
8
9
class Demo extends Component {
render() {
return [
<li>1111</li>,
<li>2222</li>,
<li>3333</li>,
]
}
}

空的根节点

避免了无故地嵌套

写法一:

1
2
3
4
5
6
7
8
9
class Demo extends Component {
render() {
return <>
<li>hello world1</li>
<li>hello world2</li>
<li>hello world3</li>
</>
}
}

写法二 :

1
2
3
4
5
6
7
8
9
10
11
12
// 使用文档片段
import React, { Component, Fragment } from 'react'

class Demo extends Component {
render() {
return <Fragment>
<li>hello world1</li>
<li>hello world2</li>
<li>hello world3</li>
</Fragment>
}
}

两种写法的效果是一样的:
空地根节点

PureComponent

自动为状态组件添加shouldComponentUpdate函数

1
2
3
4
import React, { PureComponent } from 'react'
class TodoItem extends PureComponent {

}

更安全的数据类型

使用immutableJs

处理异步任务及组件

站内搜索 react16.6中如何处理异步

为函数组件做性能优化

站内搜索 memo

新版ref用法

站内搜索 react16中如何使用ref

你的支持将鼓励我继续创作