React学习（五）：Props和State

一、Props详解

React 是单向数据流。父组件可以把它的 state / props 通过 props 传递给它的子组件来实现组件之间的通信。
props 本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。

//子组件
function Child(props) {
  return <h1>My child is {props.name}</h1>;
}
//父组件
function Parent(props){
	return (
		<div>
			<h1>I am {props.name}</h1>
			<Child name={props.childname} />
		</div>
	);
}

ReactDOM.render(
  <Parent name='allen' childname='kimi'/>,
  document.getElementById('root')
);

二、State详解

1、state介绍
React 把组件看成是一个状态机（State Machines），而state就是状态，用它来控制组件本身自己的状态。
React 里只需更新组件的state，然后新的state就可以重新渲染用户界面（不需要操作 DOM）。
2、setState函数
直接给state赋值来更新state，往往无法更新页面UI。其实state更新需要setState来重新渲染页面。

1. 当调用setState函数的时候，React.js 会更新组件的状态 state ，并且重新调用 render 方法，然后再把 render 方法所渲染的最新的内容显示到页面上
2. React.js 并不会马上修改 state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到 state 当中，然后再触发组件更新。
3. React setState 更新是异步的

3、组件生命周期
使用setState来设置一个动态Clock 组件，而在许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。
每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。
每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。
我们可以在组件类上声明特殊的方法，当组件挂载componentDidMount()或卸载componentWillUnmount()：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
 
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }
 
  componentWillUnmount() {
    clearInterval(this.timerID);
  }
 
  tick() {
    this.setState({
      date: new Date()
    });
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

三、Props和State区别

props用来传递组件间数据（类似于函数的形参），而state用来记录组件内部状态（类似于函数内声明的变量）
props是不可以被修改的，而state存在的目的就是让组件来修改的
state是在组件中创建，一般是在constructor中初始化state
state是多变的，可被修改的。每次setState都是异步更新的
·········································································································································
本文介绍React元素渲染和组件~~请大家多多指教，能get到知识点不要忘了关注点个赞~。