React 组件开发注意事项

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执行也是异步的,可能把同一周期的多个调用合并在一起执行。所以多次修改同一个变量,可能只修改一次,在此需要使用函数的方式更新。

原文地址:https://www.cnblogs.com/crazycode2/p/9094162.html