React 最新版本为V16.2.0 中文库

组件

React 组件实现一个 render() 方法，它接收输入数据并返回显示的内容。此示例使用类似XML的语法，称为 JSX 。输入数据可以通过 this.props 传入组件，被 render() 访问。

JSX是可选的，对于使用 React 而言不不是必须的。 你可以尝试在 Babel REPL  来查看 JSX 编译器生成的原始 JavaScript 代码。

Live JSX Editor

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  mountNode
);

ResultHello TaylorHello Taylor

有 state(状态) 的组件

除了获取输入数据（通过 this.props 访问）之外，组件可以维护内部 state(状态) 数据（通过 this.state 访问）。当组件的 state(状态) 数据发生变化时，渲染标记将通过调用 render() 来重新更新。

Live JSX Editor

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(prevState => ({
      seconds: prevState.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

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

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(<Timer />, mountNode);

ResultSeconds: 59Seconds: 59

应用

我们可以通过一个小的 Todo 应用程序，把 props 和 state 放在一起使用。此示例使用 state 来跟踪当前项目列表以及用户输入的文本。虽然事件处理程序似乎是内联渲染，将使用事件委托来收集和实现。

Live JSX Editor

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (!this.state.text.length) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(prevState => ({
      items: prevState.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

ReactDOM.render(<TodoApp />, mountNode);

Result

TODO

在组件中使用第三方库

React是灵活的，并提供钩子，允许您与其他库和框架进行交互。这个例子使用了 remarkable ，一个外部的 Markdown 库，用于实时地转换 textarea 的值。

Live JSX Editor

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Type some *markdown* here!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    const md = new Remarkable();
    return { __html: md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

ReactDOM.render(<MarkdownEditor />, mountNode);

Result

Input

Output

Type some markdown here!