react：props属性&&state状态介绍及使用

props

• 数据流单向，具有只读性。 数据通过 props 的传递，从父组件流向子组件，对外的。

如下：

//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app'

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

//src/app.jsx
import React from 'react'
import Nav from './nav'

class App extends React.Component {
  render () {
    const nav1 = ["面条", "煎饼", "火锅"];
    return (
      <div>
        <Nav NavNav={nav1} title="饭" />
      </div >
    )
  }
}
export default App

props不能更改，NavNav里的数据属于app里，在nav里不能更改，只能使用。

//src/nav.jsx
import React from 'react'
export default class Nav extends React.Component {
  render () {
    // console.log(this.props.NavNav)
    return (
      <div>
        <h3>{this.props.title}</h3>
        <ul>
          {this.props.NavNav.map((element, index) => {
            return <li key={index}>{element}</li>
          })}
        </ul>
      </div>
    )
  }
}

state

• state 来实现所谓“记忆”的功能
• this.state 应该被视为一个组件的私有属性,只有组件自己才能改变自己的state,别人不能变自己的state，对内的。
• 通过在 React 组件的构造函数中设置 this.state 来初始化 state。

在 JavaScript class 中，每次你定义其子类的构造函数时，都需要调用 super 方法。因此，在所有含有构造函数的的 React 组件中，构造函数必须以 super(props) 开头。

如下：

import React from 'react'
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
  }
  render() {
    return (
      <div>
        <button  onClick={() => {
          // 改变
          this.setState({
            value:2
          })
        }}>
        {/* 使用 */}
        {this.state.value}  
        </button>
      </div >
    )
  }
}
export default Home

• State 的更新是异步的

import React from 'react'
class Home extends React.Component {
  // State 的更新是异步的
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
      num: 0
    };
  }
  addClick1 = () => {
    const { num } = this.state;
    this.setState({ num: num + 1 });
    this.setState({ num: num + 1 });
  //只执行最后一个
  }
  addClick2 = () => {
    this.setState(pre => ({ num: pre.num + 1 })); //小括号括起{}来，解析出代码块
    this.setState(pre => ({ num: pre.num + 1 }));
    //function进入队列，依次执行
  }
  render() {
    return (
      <div>
      <button onClick={this.addClick1} >{this.state.num}</button>
      <button onClick={this.addClick2} >{this.state.num}</button>
      </div >
    )
  }
}
export default Home