React開發——step3 代码组织形式：高阶组件和子组件基础用法

高阶组件和子组件并不是react的API，而是一种代码组织形式。这篇文章是对这两种方式最基础用法的介绍。

高阶组件:属性代理

简单理解，就是接收一个component作为参数，返回一个component，让返回的component具备某些属性跟方法，或者是被某些元素包裹（布局需要）。
举个很简单的例子，我们要让一个组件有计时的功能
withTimer.js

import React from "react";

export default function withTimer(WrappedComponent) {
  return class extends React.Component {
    state = { time: new Date() };
    componentDidMount() {
      this.timerID = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
      clearInterval(this.timerID);
    }

    tick() {
      this.setState({
        time: new Date()
      });
    }
    render() {
      return <WrappedComponent time={this.state.time} {...this.props} />;
    }
  };
}

然后对希望有这个功能的组件用withTimer包裹一下
timer.js

import React from "react"
import withTimer from "./withTimer"

class Timer extends React.Component {
    render () {
        console.log(this.props.time)
        return <div>
                <p>{this.props.time.getTime()}</p>
            </div>
    }
}

export default withTimer(Timer)

就这样到处的component就有这个功能了。
高阶组件还有另外一个用法，反向继承，由于我还没这方面的使用经历。先不写了。

子组件

简单理解，就是在父组件那里留个占位符{this.props.children},可以放置不同的子组件，从而实现组合。
举个例子，我们希望在切换不同的tab的时候，显示不同的图片就可以这样子做。

定义一个tab组件，它接收一个数组作为tab的显示内容，在点击切换的时候会把它选中的内容传递给子组件。子组件就可以根据这个值，返回不同的组件。

class AdvancedTabSelector extends PureComponent {
  static propTypes = {
    value: PropTypes.object,
    options: PropTypes.array,
    onChange: PropTypes.func,
    children: PropTypes.func
  };

  static defaultProps = {
    value: null,
    options: [],
    onChange: () => {},
    children: () => {}
  };

  render() {
    const { options, value, onChange } = this.props;
    console.log(options)
    return (
      <div className="tab-selector">
        <ul>
          {options.map(opt => (
            <li
              key={opt.value}
              className={`tab-item ${
                opt.value === this.props.value ? "selected" : ""
              }`}
              onClick={() => this.props.onChange(opt.value)}
            >
              {opt.name}
            </li>
          ))}
        </ul>
        <br />
        <br />
        {this.props.value && this.props.children(this.props.value)}
      </div>
    );
  }
}

使用的时候

const animals = [
  { name: "Tiger", value: "tiger" },
  { name: "Elephant", value: "elephant" },
  { name: "Cow", value: "cow" }
];

class AdvancedTabSelectorSample extends PureComponent {
  state = {
    color: null
  };
  render() {
    console.log(colors)
    return (
      <div>
        <h3>Select animal: </h3>
        <AdvancedTabSelector
          options={animals}
          value={this.state.animal}
          onChange={c => this.setState({ animal: c })}
        >
          {animal => (
            <img width="100px" src={require(`./images/${animal}.png`)} />
          )}
        </AdvancedTabSelector>
      </div>
    );
  }
}