React笔记 （三）setState的最优用法和React特性

React代码规范

需要绑定this的方法可以在组件的constructor里提前操作

constructor(props) {
    super(props);
    this.listClose = this.listClose.bind(this);
}
<div onClick={this.listClose}>X</div>
listClose() {
    
}

setState方法可以返回一个函数，这样更符合规范，这样做需先在函数外边保存this或this下的值
函数可接受传值PrevState，相当于this.props

inputChange(e) {
    const value = e.target.value
    this.setState((PrevState) => ({
      inputValue: value
    }))
}

• 使用方法时可以使用解构赋值先声明再调用

import React, { Component } from 'react';

• 需要循环的比较长的JSX内容可以抽成方法调用，代码看着更简洁

getTodoItem() {
    return this.state.list.map((item,index) => {
      return (
        <div>
          <TodoItem content = {item} itemIndex={index} listClose={this.listClose.bind(this)}></TodoItem>
        </div>
      )
    })
}

React特性

• React为单向数据流，只允许父组件给子组件传值，不允许修改父组件的值。
• React可以与其他框架或库并存
• React开发模式为组件式开发
• React是视图层的框架，只负责视图数据方面的处理，复杂的传值问题等则需要用到Rdaux等框架
• React为函数式编程维护比较方便