react学习二

脚手架安装

1. 安装官方脚手架: npm
2. 创建项目: create-react-app
3. 启动项目: npm start
4. 暴露配置项: npm run eject （多出scripts和config文件夹，babel和webpack等被react封装起来，这样放开可以自行配置）

引入两个包

import React from 'react';

React
提供React.createElement，数据 -》 VDOM

import ReactDOM from 'react-dom';

ReactDOM
VDOM -》 DOM

state

setCounter = () => {
  this.setState({
    counter: this.state.counter + 1
  });
console.log(this.state.counter);
}

以上，setCounter方法改成用箭头函数，解决了事件绑定中this为undefined的问题。
以上，console打印的内容和页面显示的是一致的吗？
答案是：不是！因为state是异步的，要想同步，需要改一下

setCounter = () => {
  this.setState(state => {
    return{
      counter: this.state.counter + 1
    }
  });
console.log(this.state.counter);

还有另外一种方式，通过setTimeout

setTimeout(() => {
   this.setState({
     counter: this.state.counter + 1
  });
  console.log(this.state.counter);
}, 0);

或者在原生的dom绑定事件里（addEventListener）去执行setState