0.state的设定原则,如果render里用不到,则就不应该是一个state。
1.数组遍历时,用每一条数据的唯一标识作为key,尽量不要使用遍历的索引值作为key,如果它们从不重新排序,它们工作也很好,但是如果存在重新排序,性能将会很差。2.处理事件,推荐使用属性初始化语法,如下:class LoggingButton extends React.Component { // 这个语法确保 `this` 绑定在 handleClick 中。 // 警告:这是 *实验性的* 语法。 handleClick = () => { console.log('this is:', this); } render() { return ( ); }}
3.条件渲染,推荐使用&&语法,如下:
function Mailbox(props) { const unreadMessages = props.unreadMessages; return ();}Hello!
{ unreadMessages.length === 0 && 没有数据! } {unreadMessages.length > 0 &&You have {unreadMessages.length} unread messages.
}
4.组件名称总是以大写字母开始。
5.从组件本身的角度来命名 props 而不是它被使用的上下文环境。6.所有 React 组件都必须是纯函数,并禁止修改其自身 props 。7.善用setStatethis.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执行也是异步的,可能把同一周期的多个调用合并在一起执行。所以多次修改同一个变量,可能只修改一次,在此需要使用函数的方式更新。