React文档翻译 (快速入门)

发布时间：2017-07-04 14:57:22.743 作者： IT网络文摘 (该文来自笔记，点击查看原文)

生命周期

仅仅关于客户端的React

实例化

getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidwMount()

存在期

componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()

销毁期

componentWillUnmount

state

Do Not Modify State Directly

不能直接设置state, 这不会再次渲染一个component(this will not re-render a component), 只有一个地方可以直接设置state。

// wrong, thisthis.state = { comments: 'Hello world'};

应该使用setState()方法。

// truethis.setState({
  comments: 'Hello world',
});

State Updates May Be Asynchronous

React可以将多个setState()调用分批到单个更新中以实现性能。

因为this.props与this.state都可能是异步更新，因此不可以依靠它们的值来计算下一次的state。举例来说，下面就是错的:

// wrongthis.setState({
  counter: this.state.counter + this.props.increment,
});

为了解决这个问题，使用setState()的第二种形式，它接受一个函数，函数的第一个参数是之前的state, 第二个参数是props。

// correctthis.setState((prevState, props) => ({
  counter: prevState.counter + props.increment,
}));

State Updates are Merged

当你调用setState()的时候，React合并你提供的对象到当前的state当中。(When you call setState(), React merges the object you provide into the current state.)

The Data Flows Down

条件渲染(Conditional Rendering)

使用&&操作符替换if

function MailBox(props) {
  return (    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&        <h2>
          You have {unreadMessages.length} unread messages.        </h2>
      }    </div>
  );
}

但是这种方法，值得注意的是，return后面跟的最外层必须是html元素。而不能是下面这样:

function MailBox(props) {  return (
    {unreadMessages.length > 0 &&      <h2>
        You have {unreadMessages.length} unread messages.      </h2>
    }
  );
}

使用?:替换if else

render() {  const isLoggedIn = this.state.isLoggedIn;  return(
    <div>
      The user is <b>{isLogginIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

还可以用于更大的表达式。

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (    <div>
      {isLoggedIn ? (        <LogoutButton onClick={this.handleLogoutClick} />
      ) : (        <LoginButton onClick={this.handleLoginClick} />
      )}    </div>
  );
}

Preventing Component from Rendering

极少的情况下，要让组件隐藏起来，那么可以通过return null来实现。

Lists and Keys

在react中使用list，必须要为每个list的元素指定key(每个item的key是唯一的)。

Keys

keys帮助React确定哪些item已经改变了，被添加了或者被移除了。

不推荐设置key的值是索引，如果这个数组要被排序的话(We don't recommand using indexes for keys if the items can reorder, as that would be slow.)。因为这将会被慢。

key只在周围数组的上下文中有意义。

表单

在react中，HTML表单元素与其他DOM元素有所不一样。因为表单元素自然保持着一些内部状态。举例来说，这个HTML格式的表单接受一个单个的name:

<form>
  <label>
    Name:    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" /></form>

这个表单拥有HTML表单的默认行为，当提交表单的时候，浏览器会打开一个新的页面。如果你在react中这么使用的话，它依然起作用。但是在大多数情况下，拥有一个可以处理表单并可访问用户输入表单的数据的JavaScript函数是很方便的。实现这一点的标准方法是使用一种叫作'受控组件'的技术。

受控组件

在HTML中，类似于input textarea select这样的表单元素通常维持着它们自己的状态，并且基于用户的输入更新。在React中，可变状态通常保存在组件的state属性中，并且只能通过setState()来更新。

我们可以通过使react成为'真正的唯一来源', 将两者结合起来。然后，呈现表单的React组件也控制后续用户输入时该表单中发生的情况。一个输入表单元素的值被React控制，被称为受控组件。

一个简单的受控组件如下：

class NameForm extends React.Component {
  constructor(props) {    super(props);    this.state = {value: '',};    this.handleChange = this.handleChange.bind(this);    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(e) {
    console.log(this.state.value);
    e.preventDefault();
  }

  render() {    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </labeL>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

使用受控组件，每个状态的突变都具有相关联的处理函数。这使得修改或验证用户的输入很直接。举例来说，如果我们想要用户强制性这些名称用全部大写字母写，我们可以把handleChange写为:

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

The textarea tag

在HTML中，一个textarea元素定义它的文本通过children来定义。

而在React中，一个textarea元素是使用value属性来定义的。其使用方法和input差不多的。

Select

在HTML中，select创建一个下拉列表，比如像下面这样的:

<select>
  <option value="baoma">baoma</option>
  <option selected value="benchi">benchi</option>
  <option value="aodi">aodi</option></select>

而在React中，是在根select组件里使用value属性来选中的。在受控组件中，这更加方便，因为你只需要在一个地方更新它，比如下面这样:

class FormItem extends React.Component {
  constructor(props) {    super(props);    this.state = {value: 'benchi'};    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(e) {
    console.log(e.state.value);
    e.preventDefault();
  }

  render(    return (
      <form onSubmit={this.handleSubmit}
        <label>          Pick your favorite car:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="baoma">baoma</option>
            <option value="benchi">benchi</option>
            <option value="aodi">aodi</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      />
    );
  );
}

<input type="text" /> <textarea> <select>它们都工作的差不多，它们都接受一个value属性，这个属性可以用来实现一个受控组件。

Handling Multiple Inputs

当你需要处理多个受控组件input元素的时候，你可以给每个元素添加name属性，并且让处理函数根据该值(event.target.name)选择要进行的操作。

举个例子:

class Reservation extends React.Component {
  constructor(props) {    super(props);    this.setState = {
      isGoing: true,
      numberOfGuests: 2,
    };    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;    // es6 computed property name
    this.setState({
      [name]: value,
    });
  }

  render() {    return (
      <form>
        <label>          Is going:
          <Input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleChange} />
        </label>
        </br>
        <label>          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value=={this.state.numberOfGuests}
            onChange={this.handleChange} />
        </label>
      </form>
    );
  }
}

可能你觉得太麻烦，你需要非受控组件

Lifting State Up

在react中，共享state是通过将它移动到需要它的组件的最接近的共同祖先来实现的。这被称为提升状态。如果祖先拥有了共享状态，那么就有了source of true。

官方文档给的那个例子，简单来说，两个组件的值相互依赖的时候，就将state提升到它们最近的共同祖先，通过在父组件里进行相应的值转换，然后通过props将值传递给子组件。然后两个子组件的值改变时，调用的函数是父组件传递下来的。

因此, 可以通过子组件调父组件传递过来的函数,将子组件的值传递给父组件，来改变父组件的state, 然后父组件计算值后，通过props将计算后的值分发到各个子组件，这样就保证了唯一的来源，而子组件的值也是相互依赖(有关联)的。如下:

// 子组件handleChange(e) {  this.props.onTemperatureChange(e.target.value);
}
<input onChange={this.handleChange} type="text" />// 父组件handleChange(value) {  this.setState({
    temperature: value,
  }); 
}
<TemperatureInput
  onTemperatureChage={this.handleChange} />

组合与继承

在React中，我们推荐使用组合来复用代码而不是继承。

Containment

一些容器不能提前知道它们的children是谁。在Sidebar和Dialog里尤其的正常。

我们推荐这类的组件使用特殊的children prop来将children直接传递到它们的输出中:

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

然后让其他组件通过嵌入JSX传递任意个child给FancyBorder:

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

<FancyBorder>JSX标签中的任何内容都会作为子菜单传入FancyBorder组件。由于FancyBorder将{props.children}呈现在

中，所以传递的元素将显示在最终输出中。一般在开发中，还可以在路由中控制this.props.children是谁。比如下面这样:

// News.jsrender() {  return (    <div className={style.container}>
      {this.props.children}    </div>
  );
}// routers.jsexport function createRoutes() {  return {
    path: '/',
    component: App,
    indexRoute: { component: Main },
    childRoutes: [
      {
        path: ':channel',
        component: NewsList,
      }
    ],
  };
}

这里News组件的子组件就是NewsList。

虽然不常见，但是有时候你可能在组件里需要多个'hole', 在这种情况下，你可能想出自己的习惯，而不是使用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 />
      }
    />
  );
}

特殊化(Specialization)

有时我们将组件视为其他组件的"特殊情况"。举例来说，我们可以说WelcomeDialog是Dialog的一种特殊情况。

在React中，这通常由组合来实现，其中一个更"特定"的组件呈现出更"通用的组件", 并且使用props来配置它。

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

组合对于定义为类的组件同样适用。

function Dialog(props) {  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
      http://www.cnblogs.com/yzfdjzwl/p/7114844.html

分类导航