正文

React问题总结与归纳

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

欢迎大家指导与讨论 : ）

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

一、在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'

            }

        ]

    }

}

相关阅读

目录[+]