react入门知识点梳理生命周期讲解

42次阅读

共计 3223 个字符,预计需要花费 9 分钟才能阅读完成。

react 基础

JSX

  • JSX 是一个 JavaScript 的语法扩展, 可以很好地描述 UI 应该呈现出它应有交互的本质形式。
  • React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。
  • JSX 里的 class 变成了 className

元素

  • 元素是构成 React 应用的最小砖块。
  • React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。
  • 组件是由元素构成的。

组件

组件名称必须以大写字母开头(React 会将以小写字母开头的组件视为原生 DOM 标签)

  • 函数组件:
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}
  • class 组件
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;
  }
}

props

当 React 元素为用户自定义组件时,它会将 JSX 所接收的属性(attributes)转换为单个对象传递给组件,这个对象被称之为“props”。组件无论是使用函数声明还是通过 class 声明,都决不能修改自身的 props

// 这段代码会在页面上渲染“Hello, Sara”function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

// 上段代码渲染时发生了什么:1. 我们调用 ReactDOM.render() 函数,并传入 <Welcome name="Sara" /> 作为参数。2. React 调用 Welcome 组件,并将 {name: 'Sara'} 作为 props 传入。3. Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。4. React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>。

State

  • 使用 this.setState() 设置 state 的值
  • this.setState()可能是异步的
  • 调用 this.setState() 的时候,React 会把你提供的对象合并到当前的 state。

数据流

react是单向数据流,任何的 state 总是所属于特定的组件,而且从该 state 派生的任何数据或 UI 只能影响树中“低于”它们的组件。

生命周期

在 V16 版本中引入了 Fiber 机制。这个机制一定程度上的影响了部分生命周期的调用,并且也引入了新的 2 个 API 来解决问题。(Fiber 本质上是一个虚拟的堆栈帧,新的调度器会按照优先级自由调度这些帧,从而将之前的同步渲染改成了异步渲染,在不影响体验的情况下去分段计算更新。在之前的版本中,如果你拥有一个很复杂的复合组件,然后改动了最上层组件的 state,那么调用栈可能会很长,调用栈过长,再加上中间进行了复杂的操作,就可能导致长时间阻塞主线程,带来不好的用户体验。Fiber 就是为了解决该问题而生。)

class ExampleComponent extends React.Component {
  // 用于初始化 state
  constructor(props) {super(props)
    this.state = {hasError: false};
  }

  // 用于替换 `componentWillReceiveProps`,该函数会在初始化和 `update` 时被调用
  // 因为该函数是静态函数,所以取不到 `this`
  // 如果需要对比 `prevProps` 需要单独在 `state` 中维护
  static getDerivedStateFromProps(nextProps, prevState) {}

  // 判断是否需要更新组件,多用于组件性能优化
  shouldComponentUpdate(nextProps, nextState) {}

  // 组件挂载后调用
  // 可以在该函数中进行请求或者订阅
  componentDidMount() {}

  // 用于替换 componentWillUpdate,该函数会在 update 后 DOM 更新前被调用
  // 用于读取最新的 DOM 数据。getSnapshotBeforeUpdate() {}

  // 组件即将销毁
  // 可以在此处移除订阅,定时器等等
  componentWillUnmount() {}

  // 组件销毁后调用
  componentDidUnMount() {}

  // 组件更新后调用
  componentDidUpdate() {}

  // 错误边界 - 渲染备用 UI
  // 更新 state 使下一次渲染能够显示降级后的 UI
  // 注意错误边界仅可以捕获其子组件的错误,它无法捕获其自身的错误
  static getDerivedStateFromError(error) {return { hasError: true};
  }

  // 错误边界 - 打印错误信息
  // 你同样可以将错误日志上报给服务器
  // 注意错误边界仅可以捕获其子组件的错误,它无法捕获其自身的错误
  componentDidCatch(error, info) {console.log(error, info);
  }

  // 渲染组件函数
  render() {}

  // 以下函数不建议使用
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillUpdate(nextProps, nextState) {}
  UNSAFE_componentWillReceiveProps(nextProps) {}}

对于异步渲染,现在渲染有两个阶段:reconciliation 和 commit。前者过程是可以打断的,后者不能暂停,会一直更新界面直到完成。

  • Reconciliation 阶段:

    • componentWillMount
    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
  • Commit 阶段:

    • componentDidMount
    • componentDidUpdate
    • componentWillUnmount

因为 reconciliation 阶段是可以被打断的,所以 reconciliation 阶段会执行的生命周期函数就可能会出现调用多次的情况,从而引起 Bug。所以对于 reconciliation 阶段调用的几个函数,除了 shouldComponentUpdate 以外,其他都应该避免去使用。

事件处理

  • React 事件的命名采用小驼峰式(camelCase),而不是纯小写。
  • 使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。

为 JSX 内时间绑定 this 的几种方式:

  • constructor 内处理:
constructor() {this.handleClick = this.handleClick.bind(this);
}
  • JSX 内使用 bind:
<button onClick={this.handleClick.bind(this, id)}>Delete Row</button>
  • 箭头函数:
<button onClick={() => this.handleClick(id)}>Delete Row</button>

key

key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。
key 只是在兄弟节点之间必须唯一

受控组件

使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做 受控组件

进阶

redux-adcanve

原文 git 地址 觉得有用的话,来个 star 鼓励,持续更新中。

正文完
 0