您可以通过左右滑屏查看更多笔记内容。。

React基础

28 Aug 2019 . category: tech .
更多笔记

React基础

一.组件内部状态

组件内部状态也被称为局部状态,允许你保存、修改和删除存储在组件内部的属性。

二.ES6 对象初始化

  • 简写属性更加简洁地初始化对象;
  • 当对象中的属性名与变量名相同时,列表变量名和状态属性名称共享同一名称;
  • 简写方法名;
  • 使用计算属性名；

fitler 方法以一个函数作为输入。这个函数可以访问列表中的每一项,因为它会遍历整个列表。通过这种方式,你可以基于过滤条件来判断列表的每一项。如果该项判断结果为 true,则该项保留在列表中。否则将从列表中过滤掉。另外,好的一点是这个方法会返回一个新的列表而不是改变旧列表。它遵循了 React 中不可变数据的约定。

案例：点击Dismiss按钮-删除当前的列表

App.js

const list = [
  {title: 'React1',objectID: 0,},
  {title: 'Redux2'.,objectID: 1,},
  {title: 'Redux3',objectID: 2,},
}
//组件内部状态
class App extends Component {
//在构造函数中初始化组件的状态
  constructor(props) {
 	//继承了Component
    super(props);
    //还用this state绑定在这个类上
    this.state = {
      list,
    };
    // 定义这个类方法，并进行绑定
    this.onDissmiss=this.onDissmiss.bind(this);
  }
  //定义删除的方法的功能和业务逻辑
  // onDissmiss(id){
  //   const updateList=this.state.list.filter(function isNotId(item){
  //     return item.objectId !==id;
  //   });
  // }
  //抽取函数并将其传递给filter函数；
  // onDissmiss(id){
  //   如果传来的id 在列表中找不到，则返回，即当传来的id 是2时，返回的值为0.1
  //   function isNotId(item){ 
  //     return item.objectID !==id;
  //   }
  //   使用filter过滤得到0.1对应的列表存到一个新的列表中，此时实现了删除2
  //   const updateList=this.state.list.filter(isNotId);
  //   console.log(updateList);
  //   设置状态，原来的列表变为新的列表，继续调用render() 方法，将新的列表的内容输出   //   在页面上，
  //   this.setState({list:updateList})
  // }

  //简化以上代码：
  onDissmiss(id){
    const updateList=this.state.list.filter(item=>item.objectID!==id);
    this.setState({list:updateList})
  }
    render() {
      return (
        <div className="App">
          {this.state.list.map(item =>
            <div key={item.objectID}>
              <span>
                <a href={item.url}>{item.title}</a>
              </span>
              <span>{item.author}</span>
              <span>{item.num_comments}</span>
              <span>{item.points}</span>
              <span>
                <button onClick={()=>this.onDissmiss(item.objectID)}
                typee="button">Dissmiss</button>
              </span>
            </div>
          
          )}
        </div>
      );
    }
  } 
export default App;

三.绑定

  • 绑定的重要性：类方法不会自动绑定 this到实例上，如上实例中如果不进行this.onDissmiss=this.onDissmiss.bind(this);绑定，那在点击按钮的时候，在开发调试控制台进行console.log(this)得到的是undefined，导致后续想要使用this.state时，this不会被检测到，所以我们需要进行绑定；

  • 绑定的形式：（都可以打印出this）

    • 写在构造函数中；推荐较优写法，绑定只会在组件实例化时运行一次；

    • 写在render()函数中；尽量避免使用，因为会导致性能消耗，会在每次render()方法执行时绑定类方法；

    • 不写绑定，直接将定义业务逻辑的方法写在构造函数中，尽量避免，因为这样会导致构造函数的混乱，构造函数的目的知识实例化类及所有的属性。

    • 使用箭头函数可以实现自动绑定；–推荐；

      class App extends Component { 
	onClickMe = () => {
	console.log(this);
	}
    render() {
        return (
            <button
            onClick={this.onClickMe}43
            React 基础
            type="button">
            Click Me
            </button>
        );
    }
}

  • 常用的方式：

    class ExplainBindingsComponent extends Component {
	constructor() {
		super();
		this.doSomething = this.doSomething.bind(this);
		this.doSomethingElse = this.doSomethingElse.bind(this);
	}
	doSomething() {
		// do something
	}
	doSomethingElse() {
		// do something else
	}
	...
}