React菜鸟文档 | React菜鸟文档

声明式

React可以轻松地创建交互式ui。为应用程序中的每个状态设计简单的视图，当数据发生变化时，React将有效地更新和呈现正确的组件。

声明性视图使您的代码更容易预测和调试。

组件化

构建封装的组件来管理它们自己的状态，然后将它们组合成复杂的ui。

由于组件逻辑是用JavaScript而不是模板编写的，所以你可以很容易地在应用中传递数据，并将状态排除在DOM之外。

一次学习，随处写作

我们不会对你的其他技术栈做任何假设，所以你可以在React中开发新特性，而不需要重写现有的代码。

React也可以在服务器上使用Node和使用React Native的强大移动应用程序进行渲染。

简单组件

React 组件使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。

使用 React 的时候也可以不使用 JSX 语法。尝试使用 Babel REPL，了解 JSX 被编译成原生 JavaScript 代码的步骤。

class HelloMessage extends React.Component {
  constructor(props) {
    super(props)
    this.name = 'Tom'
  }
  render() {
    return (
      <div>
        Hello {this.name}
      </div>
    )
  }
}

有状态组件

除了使用外部数据（通过 this.props 访问）以外，组件还可以维护其内部的状态数据（通过 this.state 访问）。当组件的状态数据改变时，组件会再次调用 render() 方法重新渲染对应的标记。

class Timer extends React.Component {
      constructor(props) {
        super(props)
        this.state = { seconds: 0 }
      }
    
      tick() {
        this.setState(state => ({
          seconds: state.seconds + 1
        }))
      }
    
      componentDidMount() {
        this.interval = setInterval(() => this.tick(), 1000)
      }
    
      componentWillUnmount() {
        clearInterval(this.interval)
      }
    
      render() {
        return (
          <div>
            秒钟: {this.state.seconds}
          </div>
        )
      }
    }

应用

使用 props 和 state，我们可以创建一个简易的 Todo 应用。在示例中，我们使用 state 来保存现有的待办事项列表及用户的输入。尽管事件处理器看似被内联地渲染，但它们其实只会被事件委托进行收集和调用。

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}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            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 === 0) {
      return
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    }
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }))
  }
}

在组件中使用外部插件

React 允许你结合其他框架或库一起使用。示例中使用了一个名为 remarkable 的外部 Markdown 库。它可以实时转换 <textarea> 里的内容。

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

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

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

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