React基础：State(状态)、props

State

概念
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

State就相当于vue中的data，但是使用方式与vue不同

基本使用

实例

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

        componentDidMount() {
          this.timerID = setInterval(() => {
            this.setState({
              date: new Date()
            });
          }, 1000);
        }
        render() {
          return (
            <div>
              <h1>Hello, world!</h1>
              <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
            </div>
          );
        }
  }

 ReactDOM.render(<Clock />, document.getElementById("example"));

1、constructor是类构造函数。类构造函数用来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数

2、componentDidMount方法中的代码，是在组件已经完全挂载到网页上才会调用被执行，所以可以保证数据的加载。此外，在这方法中调用setState方法，会触发重渲染。所以，官方设计这个方法就是用来加载外部数据用的，或处理其他的副作用代码。

3、不能直接修改数据，必须使用setState修改state数据的

4、执行顺序：constructor -> render -> componentDidMount

实例：点击按钮为文本添加背景颜色，再次点击取消背景颜色

 class Change extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            activeClass: "",
            flog: false
          };
          this.clickEvent = this.clickEvent.bind(this);  //是为了解决this的指向问题，如果clickEvent是箭头函数则不需要加这一句
        }
        clickEvent() {
          if (this.state.flog) {
            this.setState({ activeClass: "", flog: false });
          } else {
            this.setState({ activeClass: "redbg", flog: true });
          }
        }
        render() {
          return (
            <div>
              <h1 className={this.state.activeClass}>Hello Word</h1>
              <button onClick={this.clickEvent}>切换</button>
            </div>
          );
        }
      }

      ReactDOM.render(<Change />, document.getElementById("example"));

props

state与props的区别
state和props都直接和组件的UI渲染有关，它们的变化都会触发组件重新渲染，但props对于使用它的组件来说是只读的，是通过父组件传递过来的，要想修改props，只能在父组件中修改；而state是组件内部自己维护的状态，可以根据与用户交互来改变

props的传值可以是任意类型

基本使用

//函数式组件
const HelloWord = props => {
     return (
       <div>
         <h1>Hellw {props.name}</h1>
       </div>
     );
   };

   ReactDOM.render(
     <HelloWord name="Word!" />,
     document.getElementById("example")
   );
//类组件
 class HelloWord extends React.Component {
        constructor(props) {
          super(props);
          this.state = {};
        }
        render() {
          return (
            <div>
              <h1>Hello {this.props.name}</h1>
            </div>
          );
        }
      }

设置 Props的默认值和类型
你可以通过组件类的 defaultProps 属性为 props 设置默认值

import React, { Component } from 'react'
import ReactTypes from 'prop-types'


export class Time extends Component {
  //设置属性的默认值
   static defaultProps={
        name:'svf'
    }
    //设置属性的类型
    static propTypes={
        name:ReactTypes.number
    }
    constructor(props) {
        super(props)
    }
    render() {
        return (
            <div>
               <p>姓名：{this.props.name}</p>
            </div>
        )
    }
}

export default Time

注：
设置属性默认值时要先安装依赖

//安装
 npm install --save prop-types
 //常见类型
 array string bool func number object
 //设置为必填项，例
 static propTypes={
        name:ReactTypes.number
   }

当类型不符合时，控制台会报红警告

父子组件传参

• 父传子：在父元素中使用state去控制子元素props从而达到父元素传递给子元素

class Father extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        name: "张三"
      };
    }
    render() {
      return (
        <div>
          <Son name={this.state.name} />
        </div>
      );
    }
  }

  class Son extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
    render() {
      return (
        <div>
          <h1>我父亲的名字是：{this.props.name}</h1>
        </div>
      );
    }
  }
  ReactDOM.render(<Father />, document.getElementById("example"));

• 子传父：props可以传递函数，props可以传递父元素的函数，从而去修改父元素的state，来实现传递数据给父元素

  class Father extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            msg: ""
          };
          this.getMsg = this.getMsg.bind(this);
        }
        getMsg(data) {
          this.setState({
            msg: data
          });
        }
        render() {
          return (
            <div>
              <h1>子元素传递给父元素的数据：{this.state.msg}</h1>
              <Son info={this.getMsg} />
            </div>
          );
        }
      }

      class Son extends React.Component {
        constructor(props) {
          super(props);
          this.state = {};
          this.clickEvent = this.clickEvent.bind(this);
        }
        clickEvent() {
          this.props.info("Hello Word");
        }
        render() {
          return (
            <div>
              <button onClick={this.clickEvent}>切换</button>
            </div>
          );
        }
      }
//clickEvent可以修改为 onClick={()=>{this.props.info('helloword')}}，不推荐
      ReactDOM.render(<Father />, document.getElementById("example"));

子传父的要点是父组件内部有个来修改父组件state的函数；将这个函数作为子组件的参数传递给子组件；子组件调用这个函数来实现传参