写一手漂亮的js(react篇)-白红宇

写一手漂亮的js(react篇)

阅读量：6241 次

发布时间：2019-06-22

本文共 2475 字，大约阅读时间需要 8 分钟。

哈哈，又是我，废话不多说，直接看代码

个人原则

既然react是组件化的，那么相同的代码，我不会写第二遍

不在dom结构中夹杂太多js逻辑

'可读性' 在我心里永远大于 '性能'（追求极致性能场景除外)

对生命周期函数排序

// badclass Demo extends React.Component {  render() {}  componentDidMount() {}  componentWillMount() {}}// goodclass Demo extends React.Component {  componentWillMount() {}  componentDidMount() {}  render() {}}

传递多个props时注意换行

// bad
    
      {}} />// goood
     
       {}}/>

利用对象展开符传递props

const someProps = {  a: 1,  b: 2,  c: 3}// bad
    
     // goood
     // 当有些属性不需要传递的时候const {  a,  ...otherProps} = someProps

利用箭头函数绑定this

// badclass Demo extends React.Component {  handleClick() {  }  render() {      }}// goodclass Demo extends React.Component {  handleClick = () => {  }  render() {      }}

提前解构state，props

// badclass Demo extends React.Component {  handleClick = () => {    this.props.add(this.state.a + this.state.b)    this.props.respond()  }}// goodclass Demo extends React.Component {  handleClick = () => {    const { a, b } = this.state    const { respond, add } = this.props    add(a + b)    respond()  }}

map时不要使用index当做key，用item的id

index没办法利用key来避免不必要的渲染

// badclass Demo extends React.Component {  render() {    return arr.map((item, i) => (      {item.name}    ))  }}// goodclass Demo extends React.Component {  render() {    return arr.map(item => (      {item.name}    ))  }}

不要将大段的内联样式写在组件上

影响阅读

// badclass Demo extends React.Component {  render() {    return (      
    
     11
    
    )  }}// goodconst styles = {  container: {    width: '100px',    height: '100px',    textAlign: 'center',    lineHeight: '100px'  }}class Demo extends React.Component {  render() {    return (      
    
     11
    
    )  }}

给props加上类型检查

一定程度上能及时发现问题，当然更好的选择是flow、ts

// badclass Demo extends React.Component {  // nothing}// goodimport PropTypes from 'prop-types';class Demo extends React.Component {  static propTypes = {    className: PropTypes.string,    style: PropTypes.object,    url: PropTypes.oneOfType([      PropTypes.string,      PropTypes.array,    ]),    onClick: PropTypes.func,  }}

尽量不要在渲染组件时传递匿名函数

首先它会影响阅读

每次渲染会生成新的匿名函数，对子组件来说就是新的props，就会触发再一次更新

当然，当函数只有一行的时候，我觉得也是可以这么做的，从代码简洁性考虑

// badclass Demo extends React.Component {  render() {    return (      
    
      {        a++        this.props.add()      }}>11
        )  }}// goodclass Demo extends React.Component {  handleClick = () => {    a++    this.props.add()  }  render() {    return (      
    
     11
        )  }}