组件中的数据和数据流《一》

目录：

• 状态介绍
• 可变状态
• 不可变状态

1、可变状态 State

1）可变状态：可以在组件中改变的数据
2）修改statea时，React会为开发者追踪一些内容，所以由于性能和复杂性的影响，最好使用无状态组件(后续会讲解Redux、Mobx、Flux优秀模式使你几乎可以不使用组件状态）

1.1 使用State的场景：

   继承React.Component类的组件都可以访问StateAPI

1.2 StateAPI用法

   StateAPI的方法签名：
  setState(updater,[callback])->void
 
    updater方法签名：
   [preState,props]=>stateChange

(返回一个对象,React将这个对象与State对象进行浅合并)

1.1.3 （新手注意）什么是浅合并？

－浅合并是指后者会完全覆盖前者
－只有顶级属性和他们的引用部分得以保留
案例说明

class Test extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     user: {
       name: "mark",
       colors: {
         favorote: "mark"
       }
     }
   };

   this.onButtonClick = this.onButtonClick.bind(this);
 }

 onButtonClick() {
   this.setState(
     //   {
     //   user: {
     //     colors: {
     //       favorote: "blue"
     //     }
     //   }
     // }
   );
 }

 render() {
   return (
     

       

         name: {this.state.user.name},favorote:{" "}
         {this.state.user.colors.favorote}, age:{this.props.age},
         newStatus :{this.state.user.colors.newStatus}
       
       change
     
   );
 }
}

render(, document.getElementById("root"));

2、不可变状态 props

1)、不可变状态：组件接收并且不应该被组件改变的数据
2）、JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。

２.1 使用props的场景：

所有React组件都可以接收props属性

2.2 props可以传递属性,也可以传递组件(props可以传送什么?怎么传送)
2.3 使用propsType和默认属性defaultProps
propsType可以为属性声明任何类型、形式和必要性(可选/强制)

3、状态有什么用:

状态可以作为组件之间数据传输的介质.父组件可将数据通过属性props传递给子组件，子组件可以通过回调函数传输数据至父组件，所以状态是组件处理数据和彼此间通讯的主要方法

后续文章将以案例介绍组件之间如何通讯组件中的数据和数据流《一》