HR365 开发指南

以组件方式构建 UI

将页面拆分为组件

下图中每个带颜色边框的元素都是一个组件

react-comp.png

理解 React 组件

  • React 组件应该是一个纯函数 view = render ( props, state )
  • props 指属性，由组件外部传入
  • state 指状态，由组件内部维护

什么是纯函数（Pure Function）

相同的输入，一定得到相同的输出。在 React 场景中，即相同的属性和状态，一定能渲染出相同的 UI 结果。

纯函数有利于测试。

[案例] 设计一个显示当前系统时间的组件

先看一种不太好的设计

// bad，此时 CurrentSystemTime 不是纯函数 
class CurrentSystemTime extends React.Component {
  
  _getCurrentSystemTime() {
    // 略
  }
  
  render() {
    return <span>{this._getCurrentSystemTime()}</span>;
  }
}

事实上，我们应该从外部通过 props 传入具体的时间值

// good，此时 CurrentSystemTime 是一个纯函数 
class CurrentSystemTime extends React.Component {
  
  render() {
    return <span>{this.props.currentSystemTime}</span>;
  }
}

结论：实际开发中应该采用第二种设计。

自定义 React 组件

方式一：定义一个 class，并继承 React.Component 或 React.PureComponent。

使用场景：组件有自己的 state

// ES6
class Welcome extends React.Component {
  
  state = {
    // ...
  }

  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

方式二：定义一个 function，接收一个参数 props 并返回 React 元素。

使用场景：组件只有 props，没有 state。

// ES5
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

or

// ES6 箭头函数
const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

API

React.createElement()

const element = React.createElement(
    React.Component,
    { name: 'label' },
    [
        React.createElement('div'),
        React.createElement('div')
    ]
);

相当于

const element = (
    <React.Component name="label">
        <div />
        <div />
    </React.Component>
);

以上两种写法是完全等价的。

React.Component 对象

  • $$typeof
  • type
  • key
  • ref
  • props
  • _owner
  • _store

← JSX →