react项目开发手记

一、Fragment 占位

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

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

解决办法如下

import React, { Component, Fragment} from 'react';class App extends Component {  render() {    return (      
            
     
                hello        
     
        
     11111
      
        );  }}export default App;

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

场景

如果在事件函数中直接使用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 => classNamefor => htmlFor

html语句

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

五、react代码优化

优化一

优化二

优化三

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

优化四

优化五

优化六

优化七

未完待续！！

转载地址：http://xdwel.baihongyu.com/

你可能感兴趣的文章