React问题总结与归纳

欢迎大家指导与讨论 : ）

　　【持续更新】本文主要记录笔者在学习中遇到的问题，并作出相应总结。有错误的地方希望各位能够指出。

　　一、在es6中getInitialState( 摘要:  constructor(props)和this.state )

/*es6*/
class TodoList extends Component{
    constructor(props){
        super(props);
        this.state = {
            items: ['hello', 'world', 'click', 'me']
        }
    }
        render(){
        //..
       }
}
/*es5*/
var TodoList = React.createClass({
      getInitialState: function() {
             return {items: ['hello', 'world', 'click', 'me']};
       },
       render(){
       //...
       }
}) 

　　二、在es6中setState( 摘要: fun.bind(this)和this.setState )

/*es6*/
class TodoList extends Component{
    render(){
        return (
            <div>
                <button onClick={ this.handleAdd.bind(this) } >Add item</button>
            </div>
        )
    }
    handleAdd(){
        var newItem = prompt('enter a new')
        var newItems = [ ...this.state.items, newItem ];
        this.setState({items: newItems})
    }
}

　　三、PureRenderMixn在深比较会失效(摘要: Immutable提升性能)

/ assume this.props.value is { foo: 'bar' }
// assume nextProps.value is { foo: 'bar' },
// but this reference is different to this.props.value
this.props.value !== nextProps.value; //true  
//错误：浅比较/引用对象的比较/this.props和nextProp实际上是两个不同的对象引用
/*正确做法1-------对象比较应该进行深比较*/
shouldComponentUpdate: function(nextProps, nextState) {
  return this.props.value.foo !== nextProps.value.foo;
}
/*正确做法2-------使用Immutable提升对象深比较的性能*/

export default class TabHeader extends Component {
　　　　shouldComponentUpdate(nextProps){
　　　　　　return !Immutable.is(Immutable.fromJS(nextProps), Immutable.fromJS(this.props));

　　　　}

　　　　//..........
}

　　四、Map结构的state由reducer传到组件时需要先提取this.props中的某个属性(摘要: this.props为多对象集合体)

export default class TabHeader extends Component {
    shouldComponentUpdate(nextProps){
        return !Immutable.is(Immutable.fromJS(nextProps), Immutable.fromJS(this.props));
    }
    render (){
        const active = this.props.tabIndex
        return (
                //....
        )
    }
 
       //....
}

　　五、reducer state中覆盖原object类型的state简洁写法(摘要: Object.assign())

Object.assign(...state, {
                    third: {
                        value: '',
                        show: true
                    }
                })
//原state结构为
const initState = {
    first: {
        value: '',
        show: true
    },
    second: {
        value: '',
        show: false
    },
    third: {
        value: '',
        show: false
    }
}

　　 六、获取动态render组件的真实DOM节点及其value值(摘要: fun.bind(this) / ReactDOM.findDom())

export default class CascadeBar extends Component{
    render(){
        return (
 
            <div>
                {this.renderFirst()}
            </div>
        )
    }
        renderFirst(){
            //if...render...
            return(
               <select  onChange={this.countryChange.bind(this)} ref="countryInput">
               //.....
               </select>
            )
        }
      countryChange(){
         ReactDOM.findDOMNode(this.refs.countryInput).value
      }
}        

　　七、父组件向子组件传递方法(摘要: React.cloneElement)

        <div className="Detail">
          {this.props.children && React.cloneElement(this.props.children, {
            helloWorld: this.helloWorld
          })}
        </div>

　　八、不同浏览器对对象更新/对象深比较的兼容性问题(underscore的extend、omit)

// 无效手机UC不支持
return Object.assign(state, {left: {show: action.value}}
// 有效->克隆了一个新对象 
var e = _.omit(state)
return _.extend(state , {left: {show: action.value}})

　　十一、在.js文件中使用async( 摘要: 配置webpack )

loaders: [
            {
              test: /\.js|jsx$/,
              loader: 'babel',
              query: {
                presets: ['es2015', 'stage-3'],
                plugins: ['transform-runtime']
              },
              exclude: /node_modules/
            }
]

　　十、ant design的webpack配置

//package.json
{
  "name": "processBar",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "antd": "^0.12.14",
    "atool-build": "^0.6.6",
    "babel-loader": "^6.2.4",
    "babel-plugin-antd": "^0.3.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "es3ify-loader": "^0.2.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.14"
  }
}
 
//webpack.config.js
var path = require('path')
var webpack = require('webpack')
 
module.exports = {
    entry: [
        path.resolve(__dirname, 'index.js')
    ],
    output: {
        path: 'dist/',
        filename: '[name].js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.js|jsx/,
                loader: 'es3ify-loader'
            },
            {
              test: /\.js|jsx$/,
              loader: 'babel',
              query: {
                presets: ['es2015', 'react'],
                cacheDirectory: true,
                plugins: [
                    'babel-plugin-antd'
                ]
              }
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
}