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

这两个点是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,

巴特西

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

最新文章

热门文章