React学习（二）Components and Props & State and Lifecycle

Components and Props

组件可以将UI分割为独立，可复用块，并且以组件化方式管理这些块。

理论上来说，组件类似于JS中的函数。它们都接受任意的输入(称为'props')然后返回描述如何展现于屏幕的React elements。

函数式组件和类组件

函数式组件:

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

类组件:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

渲染一个组件

React elements不仅可以由DOM标签构成，用户自定义标签也可:

const element = <Welcome name="Sara"/>

当React检测到一个elements中为自定义标签，会将JSX属性作为一个对象传递给这个组件，也即props：

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

const element = <Welcome name="Sara" />
ReactDOM.render(
  element,
  document.getElementById('root')
)

流程为:

调用ReactDOM.render()以及element <Welcome name="Sara">
React调用Welcome组件，且将{ name: "Sara" }作为props传入
Welcome组件返回<h1>Hello, Sara</h1>
React DOM更新DOM

组件名字首字母一定要大写

复合组件

组件可以在输出中调用其他组件

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

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Tom" />
      <Welcome name="Jack" />
    </div>
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

和Vue2.x一样，React组件必须只包含一个根节点

`props`是只读的

React组件必须遵循"永远不改变输入值"这一准则 在下一节中会介绍State这一个概念，如何在不违背这一准则的前提下修改状态。

State and Lifecycle

目前为止我们只学习了一种更新视图的方法(即不断地给ReactDOM.render()传入新的参数)。如何让组件自更新，而不是依靠我们操作来实现更新呢? 方法就是state，而state只能在类组件中进行创建。

将函数组件转换为类组件

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

转换为:

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

为类组件添加本地状态

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

为类组件添加生命周期方法

在拥有诸多组件的应用内，适时释放被摧毁组件占用资源是非常重要的。我们可以选择在组件刚渲染到DOM时为Clock开启一个定时器，在组件被摧毁之前将其关闭，这些方法被称为生命周期钩子。代码如下:

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  //组件刚刚被渲染到DOM
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  //组件脱离DOM
  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  //this.setState()方法用来更新状态
  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

分析上述代码执行过程:

当<Clock />被传递给ReactDOM.render(),React调用该组件中的构造器。由于Clock需要展示当前时间，它初始化了this.state。之后我们会来更新这个state
之后React调用了组件的render()方法。在这里React可以清楚应当在视图中呈现什么。之后更新DOM匹配渲染结果
当组件渲染结果被插入到DOM中，React调用componentDidMount()钩子。在这个钩子内部，创建一个定时器:每1秒调用tick()
每一秒浏览器调用tick()。在该方法内部,Clock组件通过调用setState并传递一个对象来更新视图，由于setState()被调用，React知道状态改变了，于是再去调用render()方法来了解更新后的视图呈现内容...
若Clock组件从DOM中移除，React会调用componentWillUnmount()钩子销毁定时器。

正确使用State

绝对不要直接修改State

//wrong,这样不会引起视图更新
this.state.comment = 'hello';

//correct
this.setState({comment: 'hello'});

State更新可能是异步的 React可能会在一次更新中批处理多个setState()调用，以便优化性能。由于this.props和this.state可能会异步更新，所以你不应该依赖于它们去计算下一个state。举例:
```
//wrong
this.setState({
 counter: this.state.counter + this.props.increment
})
```
应该使用setState的第二种形式——函数体，接受两个参数，第一个为之前的state，第二个为更新时的props。
```
//correct
this.setState((preState,props)  => {
 counter: preState.counter + props.increment
})
```
State更新会合并这意味着为setState()传递参数可以只传State的一部分，而React会进行浅合并，更改变化的部分，保留未改变的部分:
```
 constructor(props) {
   super(props);
   this.state = {
     posts: [],
     comments: []
   };
 }
```
```
componentDidMount() {
  fetchPosts().then(response => {
    this.setState({
     posts: response.posts
    });
  });

fetchComments().then(response => {
    this.setState({
      comments: response.comments
    });
  });
}
```
数据流方向-自上而下

This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.

If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.

evantianx / Bloooooooog