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传到组件时需要先提取[b]this.props中的某个属性(摘要: this.props为多对象集合体)[/b]

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'
}
]
}
}