React拾遗（上）

Posted 2022-09-16 simpul

JSX代表Objects

Babel转义器会把JSX转换成一个名为React.createElement()的方法调用。

下面两种代码的作用是完全相同的：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  className: 'greeting',
  'Hello, world!'
);

React.createElement() 这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = 
  type: 'h1',
  props: 
    className: 'greeting',
    children: 'Hello, world'
  
;

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

Props的只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。所有的React组件必须像纯函数那样使用它们的props。

数据自顶向下流动

父组件或子组件都不能知道某个组件是有状态还是无状态，并且它们不应该关心某组件是被定义为一个函数还是一个类。

这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外，其它组件不可访问。

这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。

阻止组件渲染

在极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。

但要注意的是，组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。

状态提升

在React中，状态分享是通过将state数据提升至离需要这些数据的组件最近的父组件来完成的。这就是所谓的状态提升。

在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。此时，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的父组件中。你应该在应用中保持 自上而下的数据流，而不是尝试在不同组件中同步状态。

组合VS继承

React 具有强大的组合模型，我们建议使用组合而不是继承来复用组件之间的代码。

包含关系

使用 children 属性将子元素直接传递到输出

function FancyBorder(props) 
  return (
    <div className='FancyBorder FancyBorder-' + props.color>
      props.children
    </div>
  );

function WelcomeDialog() 
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );

虽然不太常见，但有时你可能需要在组件中有多个入口，这种情况下你可以使用自己约定的属性而不是 children：

function SplitPane(props) 
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        props.left
      </div>
      <div className="SplitPane-right">
        props.right
      </div>
    </div>
  );


function App() 
  return (
    <SplitPane
      left=
        <Contacts />
      
      right=
        <Chat />
       />
  );

那么继承呢？

在 Facebook 网站上，我们的 React 使用了数以千计的组件，然而却还未发现任何需要推荐你使用继承的情况。

属性和组合为你提供了以清晰和安全的方式自定义组件的样式和行为所需的所有灵活性。请记住，组件可以接受任意元素，包括基本数据类型、React 元素或函数。

深入JSX

本质上来讲，JSX 只是为 React.createElement(component, props, ...children) 方法提供的语法糖。

例如：

<MyButton color="blue" shadowSize=2>
  Click Me
</MyButton>

编译为：

React.createElement(
  MyButton,
  color: 'blue', shadowSize: 2,
  'Click Me'
)

如果没有子代，还可以使用自闭合标签：

<div className="sidebar" />

编译为：

React.createElement(
  'div',
  className: 'sidebar',
  null
)

所以使用JSX必须：

1. React必须声明。由于 JSX 编译后会调用 React.createElement 方法，所以在你的 JSX 代码中必须首先声明 React 变量。
2. 指定React元素类型。大写开头的 JSX 标签表示一个 React 组件，这些标签将会被编译为同名变量并被引用；当元素类型以小写字母开头时，它表示一个内置的组件，如
   或 。

使用PropTypes检查类型

PropTypes 包含一整套验证器，可用于确保你接收的数据是有效的。当你给属性传递了无效值时，JavsScript 控制台将会打印警告。出于性能原因，propTypes 只在开发模式下进行检查。

下面是使用不同验证器的例子：

import PropTypes from 'prop-types';

MyComponent.propTypes = 
  // 你可以将属性声明为以下 JS 原生类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 任何可被渲染的元素（包括数字、字符串、子元素或数组）。
  optionalNode: PropTypes.node,

  // 一个 React 元素
  optionalElement: PropTypes.element,

  // 你也可以声明属性为某个类的实例，这里使用 JS 的
  // instanceof 操作符实现。
  optionalMessage: PropTypes.instanceOf(Message),

  // 你也可以限制你的属性值是某个特定值之一
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 限制它为列举类型之一的对象
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 一个指定元素类型的数组
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 一个指定类型的对象
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 一个指定属性及其类型的对象
  optionalObjectWithShape: PropTypes.shape(
    color: PropTypes.string,
    fontSize: PropTypes.number
  ),

  // 你也可以在任何 PropTypes 属性后面加上 `isRequired` 
  // 后缀，这样如果这个属性父组件没有提供时，会打印警告信息
  requiredFunc: PropTypes.func.isRequired,

  // 任意类型的数据
  requiredAny: PropTypes.any.isRequired,

  // 你也可以指定一个自定义验证器。它应该在验证失败时返回
  // 一个 Error 对象而不是 `console.warn` 或抛出异常。
  // 不过在 `oneOfType` 中它不起作用。
  customProp: function(props, propName, componentName) 
    if (!/matchme/.test(props[propName])) 
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    
  ,

  // 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf` 
  // 验证器，它应该在验证失败时返回一个 Error 对象。 它被用
  // 于验证数组或对象的每个值。验证器前两个参数的第一个是数组
  // 或对象本身，第二个是它们对应的键。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) 
    if (!/matchme/.test(propValue[key])) 
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    
  )
;

属性默认值

class Greeting extends React.Component 
  render() 
    return (
      <h1>Hello, this.props.name</h1>
    );
  


// 为属性指定默认值:
Greeting.defaultProps = 
  name: 'Stranger'
;

// 渲染 "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

defaultProps 用来确保 this.props.name 在父组件没有特别指定的情况下，有一个初始值。类型检查发生在 defaultProps 赋值之后，所以类型检查也会应用在 defaultProps 上面。

Refs & DOM

为DOM元素添加Ref

React 支持给任意组件添加特殊属性。ref 属性接受一个回调函数，它在组件被加载或卸载时会立即执行。

当给 html 元素添加 ref 属性时，ref 回调接收了底层的 DOM 元素作为参数。例如，下面的代码使用 ref 回调来存储 DOM 节点的引用。

class CustomTextInput extends React.Component 
  constructor(props) 
    super(props);
    this.focus = this.focus.bind(this);
  

  focus() 
    // 直接使用原生 API 使 text 输入框获得焦点
    this.textInput.focus();
  

  render() 
    // 使用 `ref` 的回调将 text 输入框的 DOM 节点存储到 React 
    // 实例上（比如 this.textInput）
    return (
      <div>
        <input
          type="text"
          ref=(input) =>  this.textInput = input;  />
        <input
          type="button"
          value="Focus the text input"
          onClick=this.focus
        />
      </div>
    );
  

React 组件在加载时将 DOM 元素传入 ref 的回调函数，在卸载时则会传入 null。

为类组件添加 Ref

当 ref 属性用于使用 class 声明的自定义组件时，ref 的回调接收的是已经加载的 React 实例。

Refs 与函数式组件

你不能在函数式组件上使用 ref 属性，因为它们没有实例。但是，你可以在函数式组件内部使用 ref，只要它指向一个 DOM 元素或者 class 组件。

对父组件暴露 DOM 节点

在极少数情况下，你可能希望从父组件访问子节点的 DOM 节点。在这种情况下，我们建议在子节点上暴露一个特殊的属性。子节点将会获得一个函数属性，并将其作为 ref 属性附加到 DOM 节点。这允许父代通过中间件将 ref 回调给子代的 DOM 节点。

例如：

function CustomTextInput(props) 
  return (
    <div>
      <input ref=props.inputRef />
    </div>
  );


class Parent extends React.Component 
  render() 
    return (
      <CustomTextInput
        inputRef=el => this.inputElement = el
      />
    );
  

这种模式的另一个好处是它能作用很深。可以通过props属性进行层层传递，能够让父组件访问其后代组件中的DOM节点。

注意

如果 ref 回调以内联函数的方式定义，在更新期间它会被调用两次，第一次参数是 null ，之后参数是 DOM 元素。这是因为在每次渲染中都会创建一个新的函数实例。因此，React 需要清理旧的 ref 并且设置新的。通过将 ref 的回调函数定义成类的绑定函数的方式可以避免上述问题，但是大多数情况下无关紧要。