React组件开发注意事项

Posted 2020-10-15 噜噜修

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 领取学习资料和新人奖励