React 的一些写法技巧

render函数return的内容不要太复杂，而应该在return之前处理成简单的模板

//  把逻辑处理都提出来，最后return的内容很简单
render() {
        const renderSubmenu = submenuList => {
            const submenu = submenuList.map((sub, index) => (<Submenu.Option key={index} hash={sub.hash} content={sub.content} />))
            return submenu
        }
        const menu = this.props.menuList.map((first, index) => (
            <Submenu key={index} title={first.title} hash={first.hash} iconUrl={first.iconUrl}>
                {first.submenu && renderSubmenu(first.submenu)}
            </Submenu>))
        return (
            <div style={{ height: '100%', width: 'auto', float: 'left' }} >
                <div className={style.menu} style={{ height: '100%' }}>
                    {menu}
                </div>
            </div>
        )
    }

React类里的arrow函数、getter及属性校验及默认defaultProps的写法

import PropTypes from 'prop-types'
class Submenu extends React.Component {
   static defaultProps = {
     index:1
   }
    static propTypes = {
       index:PropTypes.object,
    }
    constructor(props) {
        super(props)
        this.state = {
            value:'',
        }
    }
   // this.isMainRoot 是一个getter
    get isMainRoot() {
        return this.state.index === 0 ? true : false
    }
  // 箭头函数写法
    toggle = _ => {
        this.setState({ index: 1 })
    }
    render() {
       
    }
}

classname的用法

import classNames from 'classnames';
import styles from './dialog.css';

export default class Dialog extends React.Component {
  render() {
    const cx = classNames({
      [styles.confirm]: !this.state.disabled,
      [styles.disabledConfirm]: this.state.disabled
    });

    return <div className={styles.root}>
      <a className={cx}>Confirm</a>
      ...
    </div>
  }
}

不会改变的状态，不要放在state和render里，如果有公用的且不改变的变量（多个方法里要用到），直接在constructor里的this上就可以，不要放this.state；此外，对于依赖state的变量，也不要写在state里，可以写成get 函数，类似于vue中的computed
不要hard code，即不要写死任何可能发生变化的变量，比如后端服务接口域名，用环境变量来动态区分会好很多
多用解构，一次解构只解一层，不要解多层；对于多层才能解出来的，可以多做几次一层解构
方法中不要修改传入的参数，可以用{...options} 重新构造一个
写函数处理逻辑时，先写边界情况，最后写主要情况
第三方组件的一些配置项直接写在JSX里，不必单独写在外面某个地方

                <ReactSwipe
                    containerClass={style.main}
                    slidesPerView="auto"
                    initialSlide={1}
                    key={this.state.randomId}
                    on={
                        {
                            slideChange: function() { self.onSlideChange(this) } // eslint-disable-line
                        }
                    }
                >
                    {/* 这里Course必须放在div里，这是这个插件的用法 */}
                    <div><Course type="0" nickname={nickname} /></div>
                    {courseList}
                </ReactSwipe>

生命周期

生命周期

1、组件初始化 componentWillMount -> render -> componentDidMount
2、组件更新（props change）componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> componentDidUpdate
3、组件更新（state change） shoudlComponentUpdate -> componentWillUpdate -> componentDidUpdate
4、组件卸载或销毁 componentWillUnmount