在使⽤React开发项⽬过程中，踩过很多坑，在踩坑填坑过程中也学到了不少知识。现就将之前遇到的问题总结下来，⼀来可以让⾃⼰对这些知识点加深印象，⼆来也可以帮助更多的⼈在遇到同样的问题时可以少⾛弯路。
类名⾸字母必须⼤写，多个单词组合要⽤帕斯卡命名法(⾸字母⼤写，其它单词⾸字母也要⼤写)
state更新问题
例如下⾯的例⼦中，结果是state没更新；因为this.state.value是对象类型数据，和value指向的是同⼀个内存地址，引⽤的是同⼀个数据；对value的操作实际上就是操作原 this.state.value，所以value和this.state.value相同，对⽐下，没有改变；所以在这⾥的解决办法就是： var value=this.state.value.slice()；复制⼀个this.state.value出来给value，这样value改变了，就可以跟this.state.value作对⽐了。
getInitialState: function(){
return {value: {foo: 'bar'}};
},
onClick: function(){
var value = this.state.value; //应该这样： var value = this.state.value.slice();
value.foo += 'bar';
this.setState({value: value});
}
this指向问题
csi lvcomponentDidMount() {
<('sync', this.handleQuerySync);
this.initializeWithProps();
}
复制代码
this.handleQuerySync的 this 并不是指向当前组件，指向的是QueryStore，解决办法：（当然es6的箭头函数也可以解决this指向问题）
......
constructor(props, context) {
super(props, context);
this.state = {};
this.handleQuerySync = this.handleQuerySync.bind(this);
}
componentDidMount() {
<('sync', this.handleQuerySync);
this.initializeWithProps();
}
......
复制代码
render 返回格式
render 中 return的内容要么是空，要么就是⼀个节点，所以当有很多节点需要return时，需要⽤⼀个节点包裹起来。
js对象中的 key问题
看下⾯的代码，函数中传⼊变量key
var BindingMixin = {
handleChange: function(key){
var that = this;
return function(event){
var newState = {};
newState[key] = event.target.value;
that.setState(newState);
//that.setState({
//key: event.target.value
//})
}
}
};
复制代码
上⾯注释掉的代码是错误的，因为js对象中的 key值 不可以是变量
多次设置state问题
如下例⼦：
this.setState({
data: datas
});
this.setState({
data: datas
});
复制代码
如果两次设置状态，datas的值没有改变，是不会触发 render函数的; Javascrippt是基于事件驱动模型，假如在连续两次 this.setState()之后，React发现DOM没有变更，此时React并不会触发render⽅法
react 组件开发时遇到的问题
<Menu
vertical={true}
inverted={false}
placement={false} >
<Menu.Item title={<span>Home</span>} \>
<Menu.Item title="Home List1" />
<Menu.Item title="Home List2" />
<Menu.Item title={<a href="">Home List3</a>} /\>
</Menu.Item>
<Menu.Item title={<span><a href="">List</a></span>} /\>
</Menu>
复制代码
如上⾯的代码，如何把Menu 的属性传到⼦节点组件 Menu.Item 中去呢？ 解决⽅法是：
renderList = (children, props) => {
const extraProps = {
inverted: props.inverted,
vertical: props.vertical
};
return (
React.Children.map(children, (child) => {
return React.cloneElement(child, extraProps);
})
);
};
......
smdao复制代码
外层组件渲染⼦节点组件时，克隆⼦节点，并把需要的属性传过去；这样内层的⼦组件就可以拿到这些属性；这⾥传过去的对象，不限于属性，⽅法也可以传过去；
张英森内层组件如何复⽤外层组件的⽅法?
解决办法： 上⾯说了，⽗组件渲染⼦组件时，⽤克隆⼦组件的⽅法，顺带把需要的属性传过去，其实还可以把⽗组件的 this 对象传过去，这样在⼦组件⾥，就可以⽅便调⽤⽗组件的⽅法；如下代码：
//外层⽗组件
......
renderTreeNode = (child) => {
const defaultExpandAll = this.props.defaultExpandAll;
const extraProps = {
root: this,
defaultExpandAll: defaultExpandAll
};
return React.cloneElement(child, extraProps);
};
......
/
/内层⼦组件这样调⽤
宠物包
......
newChildren = () => {
let props = this.props;
let children = this.props.children;
return (
<ul className={styles.subTree} >
靶板{React.Children.map(children, (item, index) => {
enderTreeNode(item, index);
})}
</ul>
)
;
};
......
复制代码
dangerouslySetInnerHTML气体放电灯
var Test = ateClass({
getInitialState: function() {
return {html: '<a href="#">这是⼀段html代码</a><a href="#">2</a><a href="#">3</a>};
},
render: function() {
return (
<div>{this.state.html}</div>
);
}
});
复制代码
解析出来的还是这样的⼀段代码
<a href="#">这是⼀段html代码</a><a href="#">2</a><a href="#">3</a>'<br><br>
因为react不会⾃动帮你解析你的html代码，不合时宜的使⽤ innerHTML 可能会导致 cross-site scripting (XSS) 攻击；
var Test = ateClass({
getInitialState: function() {
return {html: '<a href="#">这是⼀段html代码</a><a href="#">2</a><a href="#">3</a>};
},
render: function() {
return (
<div dangerouslySetInnerHTML={{__html: this.state.html}}></div>
);
}
});
复制代码
这么做的意义在于，{__html:...} 背后的⽬的是表明它会被当成 "type/taint" 类型处理。 这种包裹对象，
可以通过⽅法调⽤返回净化后的数据，随后这种标记过的数据可以被传递给 dangerouslySetInnerHTML
其它⼀些遇到的问题
组件被卸载后，store⾥的数据并不会被清空；必要时得在组件挂着时清空store的数据
⽗组件监听数据变化就可以了，不需要每个⼦组件⾃⼰⼜监听⼀遍，这样容易出现bug,⽽且性能也不好，可以通过props向⼦组件传递； 关于列表key
遍历列表时给每个⼦项⽬赋key时，不要直接给 index, 因为如果增加或者删除⼦项⽬时，index 都会变，导致出问题； 也不可以⽤ index+ string，这样因为如果增加或者删除⼦项⽬时，所有⼦项⽬都会⾛更新流程，原因是index 在变； 所以在给⼦项⽬赋值时，要给唯⼀不变的数最好。
关于store中的数据有变化，但是组件中的监听函数没有监听到数据变化
这样的问题出现过很多次了，不要钻⽜⾓尖，去郁闷为啥数据有变化监听不到呀，为啥呀！其实，数据变化了，监听不到，本质原因就是没有监听；可能其他的代码卸载了监听函数。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议