React 高级用法

函数组件

函数组件没有实例，也不能监听各个生命周期，也无法扩展属性和方法。只是输入 props ，输出 jsx ，纯函数。

// class 组件
class List extends React.Component {
    constructor(props) {
        super(props)
    }
    render() {
        const { list } = this.props

        return <ul>{list.map((item, index) => {
            return <li key={item.id}>
                <span>{item.title}</span>
            </li>
        })}</ul>
    }
}

// 函数组件
function List(props) {
    const { list } = this.props

    return <ul>{list.map((item, index) => {
        return <li key={item.id}>
            <span>{item.title}</span>
        </li>
    })}</ul>
}

非受控组件

先回顾受控组件

要点：

• ref
• defaultValue defaultChecked
• 手动操作 DOM 元素

使用场景，必须通过 DOM 节点才能操作的：

• 文件上传 <input type="file">
• 有些富文本编辑器，要求通过 DOM 节点渲染

受控 vs 非受控

• 优先使用受控组件，符合 React 的设计思路
• 必须操作 DOM 的才考虑非受控组件

Portals

Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

以下情况可能要考虑使用 Portal

• 组件有 overflow: hidden （其他命中 BFC 的情况），导致了渲染问题
• 父组件有 z-index 导致了渲染问题
• 用到 fixed 等需要跳出父组件

context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。 例如：地区偏好，UI 主题。这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

• React.createContext(defaultValue) 创建 Context
• Context.Provider 最外层父组件
• Class.contextType 和 this.context - 用于类组件
• Context.Consumer - 用于函数组件

异步组件 懒加载

• import() 语法，可回顾 vue 动态组件
• React.lazy 动态引入 React 组件
• React.Suspense 实现 loading 效果

import("./math").then(math => {
  console.log(math.add(10, 20))
})