React中的响应式设计思想和事件绑定

时间:2022-06-12 15:56:10
这两个点是react入门非常重要的两个点,以前我们是直接操作dom的形式去做,react的设计思想和以前直接操作dom是完全不同的,react是一个响应式的框架,他在做编程的时候,强调的是我们不要直接操作dom。我们操作的是数据,通过数据的变化,react会自动感知到数据的变化,自动的帮你去生成dom。所以在写代码的时候,我们再也不用关注dom相关的操作了。我们只需要关注数据层的就可以了。
在react中如何定义数据呢?我们应该这么定义,TodoList这个组件,或者说他是一个类,在js里面
import React, {Component, Fragment} from 'react';

class TodoList extends Component{

  constructor(props) {
    super(props);
    this.state = {
      inputValue: 'hello!!!',
      list: []
    }
  }   render(){
    return (
      <Fragment>
        <div>
          <input
            value = {this.state.inputValue}
            onChange = {this.handleInputChange.bind(this)}/>
          <button> 提交 </button>
        </div>
        <ul>
          <li>学英语</li>
          <li>learn react</li>
        </ul>
      </Fragment>
    )
  }   handleInputChange(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
} export default TodoList;
一个类就一定会有个constructor构造函数,当我们去创建一个todolist实例或者当我们去使用组件的时候,constructor这个构造函数,会由于其它任何函数,会自动的最先被执行的一个函数,所以constructor是最优先执行的一个函数,constructor有一个固定的写法,会接收一个叫做props的参数。
super(props); 他的意思是什么?我的Todolist组件继承了React.Component这个组件,所以super指的是父类,也就是Component这个类。我要调用父类的构造函数,调用一次,这是js里面继承经常要做的一件事情。在react里面,如果写构造函数,都是要写这两句代码的。一个是接收props参数,一个是调用super这个方法,他是固定的一个写法。
主要是下面的定义数据,react里面定义数据,我们需要把数据定义在状态里面。this.state就是这个组件的状态,这个状态里面就可以存很多的东西。我们把input里面的value跟inputValue相关联,这样inputValue值变了, react会自动感知到,然后赋值给value。所以React之所以起名叫做React,就是这个原因,react在英文中是响应的意思。如果input的value=this.state.inputValue,在界面上怎么输都是inputValue的初始值,为什么?数据不发生改变,页面的值就不会发生改变,显然,这是不对的,我们希望input框可以接收我们的输入,input框可以绑定一些原生事件,比如onChange去监听他的变化。
在react中,如果想要改变react的状态,不能通过this.state这种引用的方式去改变他的值。react给每一个组件提供了一个方法,这个方法是setState,