react使用过程中常见问题

目录

Code Splitting in Create React App

React组件生命周期小结

二十五、setState注意事项

1、setState是异步的。
2、setState会造成不必要的渲染,新的 state 其实和之前的有可能是一样的。这个问题通常可以通过 shouldComponentUpdate 来解决。也可以用 pure render 或者其他的库赖解决这个问题。
3、setState并不能很有效的管理所有的组件状态

二十六、mobx在ReactJS项目中的运用

引用自：http://blog.csdn.net/u012125579/article/details/69400169

mobx 最最核心的概念只有2个。 @observable 和 @observer ，它们分别对应的是被观察者和观察者。这是大家常见的观察者模式，不过这里使用了，ES7 中的 装饰器。

核心概念2　actions 和 computed values，在 Component 中调用，这样通过 action 的方法，就避免了直接修改 props 的问题。可以通过引入 mobx 定义的严格模式，强制使用 action 来修改状态。mobx 提供了 computed 装饰器，用于获取由基础 state 衍生出来的值

import React, {Component} from 'react';
import { render } from 'react-dom';
import {observable, action, computed,useStrict} from 'mobx';
import {observer} from 'mobx-react';

useStrict(true);


class Store {
  @observable todos = [{ // 被观察者
    title: "todo标题",
    done: false,
  },{
    title: "已经完成 todo 的标题",
    done: true,
  }];

  @action changeTodoTitle({index,title}){
    this.todos[index].title = title
  }

  @computed get unfinishedTodos () {
    return  this.todos.filter((todo) => todo.done)
  }
}


@observer // 观察者
class TodoBox extends Component  {

  render() {
    console.log('render');
    return (
      

        

          { /* 把 unfinishedTodos 换成 todos，点击修改标题就会在控制台打印 "render".*/ }
          {this.props.store.unfinishedTodos.map(
            (todo,index) => 
{todo.title}
          )}
        
        

           {
            this.props.store.changeTodoTitle({index:0,title:"修改后的todo标题"});
          }} value="修改标题"/>
        
      
    )
  }
}

const store = new Store();

render(
  ,
  document.getElementById('root')
);

二十七、报Error: Plugin/Preset files are not allowed to export objects, only functions.错误的解决方案

原因是 package.json 依赖包中既有 babel 7.0 版本，又有 babel 6.0 版本，就会报这个错误

解决方案：要么全部bebel相关的包升级到7.0，要么全部降级到6.0版的，再不行检查一下全部安装的babel版本，删除node_modules重新装包