目标
- react其他api: PureComponent, ref, children, dangerouslySetInnerHTML, key
- 掌握函数式组件,常用hooks
PureComponent
- 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和Component一样
import React, { PureComponent, Component } from "react";
export default class PureComPage extends PureComponent {
state = {
list: ["a", "b", "c"]
};
render() {
const { list } = this.state;
return (
<div>
<div>
{list.map((i, index) => {
return <li key={index}>{i}</li>;
})}
</div>
<button
onClick={() => {
list.push("d");
// 使用Component生效,PureComponent 不生效
this.setState({ list });
// 使用PureComponent必须这么写
this.setState({ list: [...list] });
}}
>
更新List
</button>
</div>
);
}
}
ref
-
string ref
-
createRef
-
⚠️在组件挂载完成后使用,以及更新后使用
-
string ref使用
componentDidMount() {
console.log(this.refs, this.refs.first, this.refs.second) // 拿到所有的ref对象
}
render() {
return (
<div>
<p ref="first">001</p>
<span ref="second">002</span>
</div>
)
}
- createRef使用
import React, {Component, createRef} from 'react';
class RefPage extends Component {
wrap = createRef();
componentDidMount() {
console.log(this.wrap.current) // 得到.warp标签
}
render() {
return <div className="warp" ref={this.wrap}>这是wrap标签内容</div>
}
}
children
// 父
render() {
return (
<Child>
<h2>来自父组件的title</h2>
<p>父组件的内容,要传递给子组件</p>
</Child>
)
}
// 子
class Child extends Component {
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
dangerouslySetInnerHTML
类似vue中的v-html指令
const value = `
<p>这是第一段话</p>
<b>我是增强单词</b>
`
<div dangerouslySetInnerHTML = {{ __html: value }} />
key
每次更新后会生成一个虚拟DOM,新的虚拟dom和旧的虚拟dom比较,得到需要操作的最小的内容,然后去操作更新真实dom。
列表数据渲染,加上唯一值为key之后,操作更新的dom变少。
例如:删除第一条元素,不加key, 则其后边的每一条标签内容都修改。加上key后,仅第一条被移除了,其他标签没有被操作。
函数组件
reactHooks是 react16.8 新增内容
16.7和之前,函数组件被当作纯渲染组件使用
没有生命周期,没有this
优势:简化组件逻辑,复用状态逻辑,无需使用类组件编写
hooks规范
必须以use开头
useState
语法:const [state, setstate] = useState(initialState)
解析:const [‘state值的名称’, ‘修改该state值的方法’] = useState(‘初始值’)
import React, {useState} from 'react'
export default function FunctionPage() {
const [name, setName] = useState('小美')
return (
<div>
name: {name}
<button onClick={() => setName('玫瑰')}>修改name</button>
</div>
)
}
副作用useEffect
语法:useEffect(()=>{} [, array?])
解析:useEffect第二个参数是可选数组,存放依赖的值。
import {useEffect} from 'react'
// useEffect(() => {
// // 副作用函数
// console.log('监听到组件挂载/更新之后')
// return () => {
// console.log('即将要卸载时候执行的函数')
// }
// }, [name])
// 分开写多个useEffect
useEffect(() => {
console.log('监听到组件挂载')
return () => {
console.log('即将要卸载时候执行的函数')
}
}, [])
useEffect(() => {
console.log('监听到组件挂载/更新之后','想具体监听某个值可以加上第二个参数')
})
useRef
- useRef基本使用(获取dom)
import React, {useState,useEffect, useRef} from 'react'
export default function FunctionPage() {
const [name, setName] = useState('小美')
let refBtn = useRef();
useEffect(() => {
console.log('refBnt: ', refBtn) // {current: button}
})
return (
<div>
name: {name}
<button ref={refBtn} onClick={() => setName('玫瑰')}>修改name</button>
</div>
)
}
hook 规则
- 只能在顶层使用,不能放到条件或者任何语句内
- 在函数组件中有hook, 类组件不能使用hook
- 在hook中可以使用(自定义hook时,可以调用别的hook)
- 所有hook 必须以 use开头
专栏系列快速链接
1-从零开始学react-认识react&jsx&props&state
2-从零开始学react-深入state,组件通讯,生命周期,受控组件
3-从零开始学react-其他api,初识hook
4-从零开始学react-hooks相关
5-从零开始学react - react-router-dom5
6-从零开始学react - redux相关
7-从零开始学react - 全家桶项目实战