React学习（记录二）

说明一下：不管用什么工具构建项目，关注点要放在react的语法和写法上面，我只是自己学习记录，谢谢各位；

React基础

组件内部状态

组件内部状态也被称为局部状态，允许你保存、修改和删除存储在组件内部属性。使用 ES6 类组件可以在构造函数中初始化组件的状态。 构造函数只会在组件初始化时调用一次。

    class App extends Component {
        constructor(prop){
            super(prop)
        }
      
      render(){
          return (
              <div><div>
          )
       } 
   }      
             

这是一个简单的类组件：当你使用 ES6 编写的组件有一个构造函数时，它需要强制地调用 super(); 方法，因为这个 App 组件是 Component 的子类。因此在你的APP组件要声明 extends Component 。 你也可以调用 super(props);，它会在你的构造函数中设置 this.props 以供在构造函数中访问它们。 否则当在构造函数中访问 this.props ，会得到 undefined。

react类组件的数据状态都要存储在state中，修改时也必须使用setState()方法，在修改state中的数据状态后，render函数会再次运行，这样就会重新渲染，使你修改之后的状态展示在页面上。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={this.state.logo} className="App-logo" alt="logo" />
          <span>{this.state.count}</span>
          <button onClick={() => this.setState({ count: this.state.count + 1 })}>
            +1
          </button>
        </header>
      </div>
    );
  }
}

每次点击按钮都会使用 setState 使count +1；React的单向数据流：你点击的按钮触发方法，然后通过setState方法修改组件的state。最后render函数运行重新渲染页面。

另注意在类组件中尽量使用回调函数来绑定方法

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }
  // 计算方法 
  add () {
    this.setState({
      count: this.state.count + 1,
    });
  };


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={this.state.logo} className="App-logo" alt="logo" />
          <span>{this.state.count}</span>
          <button onClick={this.add}>
            +1
          </button>
        </header>
      </div>
    );
  }
}

此方法会在点击是报错，因为类组件的方法不会自动绑定到this上，所以this这时是undefined；

这个问题当然可以解决比如用bind绑定this 写在构造函数中，但是那样写第一会对性能不好，也比较麻烦和难读。我们自然会越简单越好，改成下面的回调函数就好了：回调函数的this会一直指向本类组件；

 // 计算方法 
  add = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

方法在render的执行

还有一个需要注意到的点：传给元素事件处理器的内容必须是函数。

下面的代码中 点击按钮并不会发生任何事，控制台也不会打印，只有第一次进入的时候会打印；

  onBtnClick = () => {
    console.log('点击了按钮')
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={this.state.logo} className="App-logo" alt="logo" />
          <span>{this.state.count}</span>
          <button onClick={this.onBtnClick()}>
            按钮
          </button>
        </header>
      </div>
    );
  }

下面的代码可以正常运行

onBtnClick = () => {
    console.log('点击了按钮')
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={this.state.logo} className="App-logo" alt="logo" />
          <span>{this.state.count}</span>
          <button onClick={this.onBtnClick}>
            按钮
          </button>
        </header>
      </div>
    );
  }

如果需要获取dom上的参数 我们可以使用回调函数来进行传参 写成下面的就可以了

 onBtnClick = (msg) => {
    console.log(msg)
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={this.state.logo} className="App-logo" alt="logo" />
          <span>{this.state.count}</span>
          <button onClick={()=>this.onBtnClick('点击了按钮')}>
            按钮
          </button>
        </header>
      </div>
    );
  }