React快速上手（二）state和事件绑定

上一篇介绍了react基础的jsx语法和组件相关的内容，但更新整个页面只能重新调用ReactDOM.render方法，这一篇会谈一谈react中的另一个核心概念：state，以及如何绑定事件

state

通过class方式声明的组件，可以在一开始的constructor中声明一个state，state有点类似于vue中的data，用于存放一些初始数据，然后我们通过更新state中的值，则可以对应的更新dom树

class App extends React.Component {
		// 声明state则需要提供一个constructor构造函数
		// 该构造函数应始终以props作为参数,在其中super(props)来将props传递到父类的构造函数中
        constructor(props) {
          super(props);
          // 在内部添加一个state,写入初始数据
          this.state = {
            num:1
          };
        }
        render() {
          return (
            <div>
             {/* 通过this.state访问数据 */}
             <p>{this.state.num}</p>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("root"));

正确使用state
关于state要注意
1.不要直接修改 state，直接修改state不会重新渲染页面，唯一可以直接给state赋值的地方就是构造函数中。
正确修改state的方法是通过setState()方法，通过this.setState(key:value)来给state重新赋值，并重新渲染页面

2.state的更新可能会是异步的
这代表我们不能依靠this.state和this.props来获取准确的当前state，解决这个问题，你需要将setState的参数换成一个函数，这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数,返回一个键值对的对象来更新state

this.setState(function(state, props) {
  // 不要使用this.state和this.props！
  return {
    key:value
  };
});

事件绑定

react的事件绑定使用小驼峰式命名，需要传递一个函数而不是作为事件处理函数

<input type="button" onClick={handleClick} />
// 如果内部逻辑较为简单,可以直接将逻辑写在函数内部,但要注意写成函数形式
// 这样写会实质上绑定的是console.log的return值
<input type="button" onClick={console.log('点击了')} />
// 要写成函数形式
<input type="button" onClick={()=>{console.log('点击了')}} />

react中不能通过return false来阻止默认事件

<a href="#" onClick={()=>{return false}}>
  不能阻止跳转
</a>

function handleClick(e) {
  e.preventDefault();
}

<a href="#" onClick={handleClick}>
  可以阻止跳转
</a>

如果需要在回调中使用this，需要绑定操作，否则this会是undefined

这是react文档的示例，需要经过一个bind(this)，未经过这一步的，内部读取的this是undefined
这种写法比较麻烦，通常会使用箭头函数来达到同样的效果，一种是在声明时使用箭头函数，一种是在绑定时使用箭头函数

 class Add extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            num: 1
          };
        }
        // 在绑定时候，通过 事件名 = ()=>{} 的方式来声明函数,这样this就会被绑定
        add1 = () => {
          this.setState((state,props)=>{
              return {num:state.num+1}
          });
        };
        add2 (){
          this.setState((state,props)=>{
            return {num:state.num+2}
          });
        };
        render() {
          return (
            <div>
              <p>{this.state.num}</p>
              <input type="button" value="+1" onClick={this.add1} />
              {/* 也可以在调用的时候使用箭头函数的形式来调用,也可以绑定this */}
              <input type="button" value="+2" onClick={()=>{this.add2()}} />
            </div>
          );
        }
      }

事件传参
在react中传参要注意不能像vue一样写在括号了，刚开始的时候用vue的方式，发现事件并没有被绑定，然后才意识到如果使用vue的方法，事件直接就调用了

// 错误的,这样事件直接就被调用了,绑定的是实质是delRow方法的返回值
<input type="button" value="删除该行" onClick={this.delRow(id)} />
// 通常使用箭头函数的方式传参
<input type="button" value="删除该行" onClick={()=>{this.delRow(id})} />

总结

以上就是关于react的state和事件绑定的介绍，下一部分会介绍react的列表渲染和条件渲染