React(二)

Joanna_Na
381 阅读5分钟

React.PureComponent与React.Component的区别

  • React.Component并未实现shouldComponentUpdate()
  • React.PureComponent中以浅层对比prop和state的方式来实现了该函数

函数组件在给定相同的props的情况下渲染相同的结果，可以使用什么

React.memo为高阶组件，仅检查props变更，只适用于函数组件，其通过记忆组件渲染结果的方式来提高组件的性能表现。

如果函数组件被React.memo包裹，且其实现中拥有useState或 useContext的 Hook，当 context 发生变化时，它仍会重新渲染

注意：

与 class 组件中shouldComponentUpdate()方法不同的是，如果 props 相等，会返回true；如果 props 不相等，则返回false。这与 shouldComponentUpdate 方法的返回值相反。

createElement、cloneElement、createFactory

  • createElement创建并返回指定类型的新React元素。

  • cloneElement以element元素为样板克隆并返回新的React元素。返回元素的 props 是将新的 props 与原始元素的 props 浅层合并后的结果。新的子元素将取代现有的子元素，而来自原始元素的 key和ref将被保留。

  • createFactory返回用于生成指定类型React元素的函数。（已废弃）

React.createRef和React.forwardRef

  • React.createRef创建一个能够通过ref属性附加到React元素的ref。

  • React.forwardRef会创建一个React组件，这个组件能够将其接受的ref属性转发到其组件树下的另一个组件中。

    应用场景：

    1. 转发refs到DOM组件
    2. 在高阶组件中转发refs
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

// You can now get a ref directly to the DOM button:
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

class组件的生命周期

  • 挂载

    • constructor()

      如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。

      在 React 组件挂载之前，会调用它的构造函数。在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props在构造函数中可能会出现未定义的 bug。

    • static getDerivedStateFromProps()

      getDerivedStateFromProps会在调用render方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新state，如果返回null则不更新任何内容。

      state的值在任何时候都取决于props。

    • render()

    • componentDidMount()

  • 更新

    • static getDerivedStateFromProps()

    • shouldComponentUpdate()

      根据shouldComponentUpdate()的返回值，判断 React 组件的输出是否受当前state或props更改的影响。默认行为是 state每次发生变化组件都会重新渲染。

    • render()

    • getSnapshotBeforeUpdate()

      getSnapshotBeforeUpdate()在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。

    • componentDidUpdate()

  • 卸载
    • componentWillUnmount()
  • 错误处理

    • static getDerivedStateFromError()

      此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新state

    • componentDidCatch()

      此生命周期在后代组件抛出错误后被调用。 它接收两个参数：

      error —— 抛出的错误。

      info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

ReactDom

  • render()
ReactDOM.render(element, container[, callback])

在提供的container里渲染一个React元素，并返回对该组件的引用（或者针对无状态组件返回null）

  • hydrate()
ReactDOM.hydrate(element, container[, callback])

与render()相同，但它用于在ReactDOMServer渲染的容器中对 HTML 的内容进行hydrate操作。

  • unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)

从 DOM 中卸载组件，会将其事件处理器（event handlers）和 state 一并清除。如果指定容器上没有对应已挂载的组件，这个函数什么也不会做。如果组件被移除将会返回true，如果没有组件可被移除将会返回false。

  • findDOMNode()
ReactDOM.findDOMNode(component)

注意

  1. findDOMNode是一个访问底层 DOM 节点的应急方案（escape hatch）。
  2. findDOMNode只在已挂载的组件上可用（即，已经放置在 DOM 中的组件）。如果你尝试调用未挂载的组件（例如在一个还未创建的组件上调用render()中的findDOMNode()）将会引发异常。
  3. findDOMNode不能用于函数组件。
  • createPortal()
ReactDOM.createPortal(child, container)

创建portal。Portal将提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。

React与HTML之间有很多属性存在差异

  • checked

  • className

  • dangerouslySetInnerHTML

    dangerouslySetInnerHTML是 React 为浏览器 DOM 提供 innerHTML的替换方案。通常来讲，使用代码直接设置 HTML 存在风险，因为很容易无意中使用户暴露于跨站脚本（XSS）的攻击。因此，你可以直接在 React 中设置 HTML，但当你想设置 dangerouslySetInnerHTML时，需要向其传递包含 key 为__html 的对象，以此来警示你。例如：

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

  • htmlFor

    由于for在 JavaScript 中是保留字，所以 React 元素中使用了htmlFor来代替。

  • onChange

  • selected

  • style

    style接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串。这与 DOM 中style的 JavaScript 属性是一致的，同时会更高效的，且能预防跨站脚本（XSS）的安全漏洞。

  • suppressContentEditableWarning

    通常，当拥有子节点的元素被标记为contentEditable时，React 会发出一个警告，因为这不会生效。该属性将禁止此警告。尽量不要使用该属性。

  • suppressHydrationWarning

    如果你使用 React 服务端渲染，通常会在当服务端与客户端渲染不同的内容时发出警告。但是，在一些极少数的情况下，很难甚至于不可能保证内容的一致性。例如，在服务端和客户端上，时间戳通常是不同的。

如果设置suppressHydrationWarning为true，React 将不会警告你属性与元素内容不一致。它只会对元素一级深度有效，并且打算作为应急方案。因此不要过度使用它。

  • value
avatar
文章
阅读
粉丝