3-从零开始学react-其他api,初识hook

目标

• 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 - 全家桶项目实战