React笔记 （六）react代码优化与ref的使用

代码优化

band(this)最好放在constructor里，在最上方写：

constructor(props) {
    super(props);
    this.listClose = this.listClose.bind(this);
}

label标签的htmlFor属性写上input的ID，这样点击lable标签也可以聚焦：

<label htmlFor="insertArea">输入内容</label>
<input id="insertArea"/>

从React中引入Fragment可以包在组件的最外边，这样它将不占位且在检查中看不到

import React, { Component, Fragment} from 'react';

render() {
    return (
      <Fragment className="TodoList">
      </Fragment>
    );
  }

功能性模块可以将其抽成方法，之后在JSX中调用方法就可以：

return (
  <Fragment className="TodoList">
    {this.getTodoItem()}
  </Fragment>
);
getTodoItem() {
return this.state.list.map((item,index) => {
  return (
    <TodoItem key={index} content = {item} itemIndex={index} listClose={this.listClose.bind(this)}></TodoItem>
  )
})
}

React不推荐直接用对象更改status的值，推荐使用一个函数：

this.setState(() => ({
  inputValue: value
}))

React 在setState方法里支持传入prevState,它等价于 this.state：

this.setState((prevState) => ({
    list: [...prevState.list, prevState.inputValue],
    inputValue: ""
}))

ref的作用是获取JSX上的DOM元素，来进行操作：

<ul ref={(ul)=>{this.ul = ul}}>
</ul>

这里直接使用this.ul就可以了，但是不推荐使用ref去更改DOM，会出现很多问提，用数据去操作视图。
在使用时会遇到问提，React的setState是异步的，所以获取会出现问题，可以使用setState的回调函数确保正确：

this.setState(() => ({
  inputValue: value
}, () => {}))