react 学习手记

react项目开发手记

一、Fragment 占位

react组件中要求组件内容必须包含在一个标签中，不然会报错

我们通常的做法是，在最外层包裹一个div标签，但是这个div标签最终会渲染到页面中，如果我们不想要让它显示的话，我们可以利用Fragment来解决。

解决办法如下

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

class App extends Component {
  render() {
    return (
      <Fragment>
        <div>
          hello
        </div>
        <p>11111</p>
      </Fragment>
    );
  }
}

export default App;

二、事件绑定时的this指向问题

场景

<input type="text" onFocus={this.handleFocus} onChange={this.handleChange}  value={this.state.inputVal} />

如果在事件函数中直接使用this.state会报错state未找到，这时候我们console.log以下发现是undefined，难怪会报错呢，我们是想要让他指向我们的todoList组件，这样我们就能调用到了。

解决办法

// 调用ES6的bind方法，重新指定this指向
    this.handleChange = this.handleChange.bind(this);
    this.handleFocus = this.handleFocus.bind(this);

• 另外在修改state的时候，我们需要使用setState方法来实现。

三、ES6进行添加和删除数组成员

// add
  this.setState({
    list: [...this.state.list, this.state.inputVal]
  })

// 删除
let list = [...this.state.list];
list.splice(index, 1);
this.setState({
  list: list,
  inputVal: ''
})

// 思考
this.state.list.splice(index, 1);
this.setState({
    list: this.state.list
})
// 这样看起来是没问题，react中有immutable概念
// 但是react中不建议对state直接修改，而是推荐使用setState来修改

四、jsx补充

注释

{/*我是注释*/}

{
  //多行注释
}

class和for

// react中规定
class => className
for => htmlFor

html语句

dangerouslySetInnerHTML={__html: item}

// 同过上诉方法就可以将<h1></h1>这类字符串变为html样式。
// 但是存在一定的风险，容易受到攻击，因此不推荐使用

五、react代码优化

优化一

优化二

优化三

对于this的从新绑定，最好在constructor中就对其进行绑定，如果你还在jsx表达式中进行绑定的话，这样会影响性能的。

优化四

优化五

优化六

优化七

demo地址

未完待续！！