标签：渲染 obj span 元素 开始 节点 工作 初始化 批量
0.state的设定原则，如果render里用不到，则就不应该是一个state。
1.数组遍历时，用每一条数据的唯一标识作为key，尽量不要使用遍历的索引值作为key，如果它们从不重新排序，它们工作也很好，但是如果存在重新排序，性能将会很差。
2.处理事件，推荐使用属性初始化语法，如下：
class LoggingButton extends React.Component {
// 这个语法确保 `this` 绑定在 handleClick 中。
// 警告：这是 *实验性的* 语法。
handleClick = () => {
console.log(‘this is:‘, this);
}
render() {
return (
<button
onClick={this.handleClick}>
Click me
</button>
);
}
}
3.条件渲染，推荐使用&&语法，如下：
function Mailbox(props) {
const unreadMessages =
props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{
unreadMessages.length === 0 && <span>没有数据！</span>
}
{unreadMessages.length
> 0 &&
<h2>
You have
{unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
4.组件名称总是以大写字母开始。
5.从组件本身的角度来命名 props 而不是它被使用的上下文环境。
6.所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
7.善用setState
this.setState((prevState,props) => ({
xx: prevState.xx +
props.yy
}));
8.如果 map() 体中有太多嵌套，可能是提取组件（组件拆分遵循一个常用的技巧是单一职责原则，即一个组件理想情况下只处理一件事）的好时机。
9.react组件创建时推荐组合的方式创建，不推荐继承的方式。如果要在组件之间重用非 U I功能，我们建议将其提取到单独的 JavaScript 模块中。组件可以导入它并使用该函数，对象或类，而不扩展它。
10.如果在输出中想要渲染 false ，true，null 或者 undefined ，你必须先将其转化为字符串。
11.获取组件内DOM元素推荐使用回调函数（ref={input=>this.inputText=input}）的方式并且对父组件暴露 DOM 节点，不要使用string类型(ref="inputText")的方式（此API有被移除的可能）。使用ref+不受控组件是快速开发的一种手段，适合代码质量要求不高的工程。
12.组件state的变化，普通的js数据类型没有问题，对于引用数据类型（数组，对象），要注意数据的不可变性，比如数组中增加/删除/修改一条数据要保持原数组不变，同时返回一个新数组(es6展开语法[...oldArr,‘newEle‘],{...oldObj,newEle}，filter的灵活应用)，使用新数组修改state，推荐使用Immutable.js。
13.自15.6.1开始不推荐MIXIN，原来的react-addons-pure-render-mixin由React.PureComponent代替。
14.高阶组件是一个容器，内部要组件，不要修改包裹的组件，实际产品中应用较少，不用太纠结。
15.setState() 并不总是立即更新组件。它可能会批量或延迟到后面更新。这使得在调用 setState() 之后立即读取 this.state 存在一个潜在的陷阱。而使用 componentDidUpdate 或 setState 回调（setState(updater, callback)），在应用更新后，都将被保证触发。
当第一个参数为对象时，可能会setState执行也是异步的，可能把同一周期的多个调用合并在一起执行。所以多次修改同一个变量，可能只修改一次，在此需要使用函数的方式更新。
WEB前端学习交流群21 598399936
QQ注册登录 http://www.kgc.cn/index.php?tuin=7123 领取学习资料和新人奖励
标签：渲染 obj span 元素 开始 节点 工作 初始化 批量
原文地址：http://www.cnblogs.com/luludehuhuan/p/7873347.html
