React 16 - 基础

Cellinlab

发布于 2023-05-17 14:17:17

3670

发布于 2023-05-17 14:17:17

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

历史背景及特性

问题根源

传统 UI 操作（DOM API）关注太多细节
应用程序状态分散在各处，难以追踪和维护

React 思想

UI 细节：始终整体“刷新”页面，无需关心细节
数据模型：
- Flux 架构：单向数据流
- 实现
  - Redux
  - MobX

以组件方式考虑 UI 构建

组件化思想

class CommentBox extends Component {
  render() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
}

React 组件

React 组件一般不提供方法，而是某种状态机
React 组件可以理解为一个纯函数
单向数据绑定

创建步骤

创建静态 UI
考虑组件的状态组成
- 状态来自外部还是要在内部维护
考虑组件的交互方式
- 内部进行的交互操作的结果如何暴露给外部使用

受控组件：表单元素状态由使用者维护

<input type="text"
  value={this.state.value}
  onChange={evt => 
    this.setState({value: evt.target.value})
  }
/>

非受控组件：表单元素状态由 DOM 自身维护

<input type="text"
  ref={node => this.input = node}
/>

何时创建组件

单一职责原则：

每个组件只做一件事
如果组件变得复杂，那么应该拆分成小组件

数据状态管理

DRY 原则：

能计算得到的状态就不要单独存储
组件尽量无状态，所需数据通过 props 获取

JSX

不是一种语言，而是一种语法糖
在 JavaScript 代码中直接写 HTML 标记

const name = 'Cell';
const element = (
  <h1>
    Hello, {name}
  </h1>
);

本质是动态创建组件的语法糖

const name = 'Cell';
const element = React.createElement(
  'h1',
  null,
  'Hello, ',
  name
);

在 JSX 中使用表达式

JSX 本身也是表达式

const element = <h1>Hello, world</h1>

在属性中使用表达式

<MyComment foo={ 1+2 } />

延展属性

const props = {
  firstName: 'Cell',
  lastName: 'Lin',
};
const greeting = <Greeting {...props} />;

表达式作为子元素

const element = <h1>{props.firstName}</h1>

JSX 优点

直观：声明式创建界面
灵活：代码动态创建界面
无需学习新的模板语言

JSX 约定

自定义组件以大写字母开头
- React 认为小写的 tag 是原生的 DOM 节点，如 div
JSX 标记可以直接使用属性语法，如 <menu.Item />

React 生命周期

(opens new window)

constructor

用于初始化内部状态，很少使用
唯一可以直接修改 state 的地方

getDerivedStateFromProps

当 state 需要从 props 初始化时使用
尽量不要使用：维护两者状态一致性会增加复杂度
每次 render 都会调用
典型场景：表单组件获取默认值

componentDidMount

UI 渲染完成后调用
只执行一次
典型场景：获取外部资源

componentWillUnmount

组件移除时被调用
典型场景：资源释放

getSnapshotBeforeUpdate

在页面 render 之前调用，state 已更新
典型场景：获取 render 之前的 DOM 状态

componentDidUpdate

每次 UI 更新时被调用
典型场景：页面需要根据 props 变化重新获取数据

shouldComponentUpdate

决定 Virtual DOM 是否要重绘
一般可以由 PureComponent 自动实现
典型场景：性能优化

Virtual DOM

Virtual DOM 是 JSX 运行的基础。

工作原理

广度优先分层比较

根节点开始比较

属性变化及顺序

节点类型发生变化

节点跨层移动

Virtual DOM 的两个假设
- 组件的 DOM 结构时相对稳定的
- 类型相同的兄弟节点可以被唯一标识

组件设计模式

高阶组件 HOC

高阶组件接受组件作为参数，返回新的组件。可以通过高阶组件协调外部资源。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

应用场景
- 通用逻辑被不同组件使用

函数作为子组件

class MyComment extends React.Component {
  render () {
    return (
      <div>
        {this.props.children('cellinlab')}
      </div>
    );
  };
}

<MyComment>
  {(name) => <div>Hello, {name}</div>}
</MyComment>

应用场景
- 外部决定子组件如何展示（类似 Vue slot？）

Context API

用于共享全局状态。

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render () {
    return (
      <ThemeContext.Provider value='dark'>
        <ThemeButton />
      </ThemeContext.Provider>
    );
  }
}

function ThemeButton(props) {
  return (
    <ThemeContext.Consumer>
      {(theme) => <Button {...props} theme={theme} />}
    </ThemeContext.Consumer>
  );
}