react开发讨论帖

[BoyuZhou]

在使用react开发中，你一定越过很多的坑，躺过一些河，也深陷一些漩涡，现在还没有爬出来。当然，你也有一些苦思冥想的心得，和让你洋洋自得，睡梦中还会偷笑的小技巧。现在把他们分享出来吧，将一个人的烦恼，交给大家一起解决，让一个人技巧，成为他人的良药。一起讨论，一起成长。在这个issues中，我们将自己的心得和问题以回复的形式，分享出来。

[onvno]

我先抛块砖，占楼。

目前初介入react项目，遇到的一个坑可能对各位都不是事。

项目中做导航组件，涉及到计算元素的width,position属性，于是就理所当然的用到了ref定义，然后想当然的通过this.refs.xxxx去调用组件。

然后失败了，百思不得其解，ref定义的姿势有问题? 尝试在官网推荐的函数语句式定义ref，仍无国，一种被欺骗的感觉涌上心头。因为都是按官方推荐做的呀:

• 尽可能不操作dom,忍无可忍无需再忍的时候使用dom
• 无状态组件尽量使用函数式组件
  ...

等等，试着把这个函数式组件改成react.component试下，然后故事的结尾就是：皆大欢喜。

最后，发现官网是有这部分说明的:

You may not use the ref attribute on functional components because they don't have instances:

function MyFunctionalComponent() {
  return <input />;
}

class Parent extends React.Component {
  render() {
    // This will *not* work!
    return (
      <MyFunctionalComponent
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

感觉被欺骗的感觉，瞬间变为感觉被打脸，哎，人丑，书，还是要多读。

[chenjf5]

@onvno 函数式无状态组件里面也是可以使用ref的，通过给ref函数赋值就ok，

import ReactDOM from 'react-dom';
export default functionSearchComp({search}){
    let input;
    return (
        <div className="banner">
            <div className="banner-wrap">
                <h2>认证查询</h2>
                <div className="auth-search">
                    <input type="text" ref={(e) => input = e}/>
                    <i className="uf uf-search" onClick={() => {search(ReactDOM.findDOMNode(input).value);}}/>
                </div>
            </div>
        </div>
    )
}

[zhaoyuchief]

父子组件调用的dom，虽然很少这么使用，也不建议使用。

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

[chenjf5]

@zhaoyuchief 你这样直接改变props了

[GuoYongfeng]

setState 的异步使用，不知道你有没有使用过。

    // 标志置位：已设置期限
    setTimeSelectStatus = ( time ) => {
      this.setState({
        timeSelectStatus: true,
        time
      }, () => { this.setStatusAndActiveButton(); })
    }

关于setState ，还有很多故事要讲。

[GuoYongfeng]

HOC的基本理解和应用

如果你有两个及以上的组件，有一些公共的 state 或是 function 需要维护，咋办呢。总不能每个组件都 copy 一份吧，不太好维护，而且代码冗余啊。

实现组件间的数据和逻辑共享，你可以使用 mixin ，但那已经过时了，不推荐使用。so，我们来看看如何基于高阶组件（HOC）的写法来实现。（名字听起来就感觉很高端呢，然而不要想太多）

import React, { Component } from 'react'
import { findDOMNode } from 'react-dom'

const PunishHOC = Wrapper => class extends Component {
  constructor(props) {
    super(props)
    this.state = {
      punishSendStatus: false
    }
  }
  // 设置 textarea 中的文本
  setTextareaVal = ( refs, text ) => {
    findDOMNode(refs).value = text;
  }
  // 设置所消耗的金豆
  setCostVal = ( refs, text ) => {
    refs.innerText = text;
  }

  render(){
    return (
      <Wrapper
        setTextareaVal={this.setTextareaVal}
        setCostVal={this.setCostVal}
        {...this.state} />
    )
  }
}

export default PunishHOC

ok，以上只是算定义组件，那么如何使用呢。

// 传入的 PunishUserComp 是一个组件，返回后的 PunishUser 也是一个组件
const PunishUser = PunishHOC(PunishUserComp)

这个时候，你就可以在定义的 PunishUserComp 组件轻松的使用 PunishHOC 中定义的各种 function 和 state 了。（得通过：this.props.xx 拿到哦）

class PunishUserComp extends Component {
  constructor(props) {
    super(props)
  }
  render(){
    return (
      <div>
        <h3 onClick={this.props.setTextareaVal}> 超级无敌高阶组件 </h3>
      </div>
    )
  }
}

这个小栗子可见一斑。

[GuoYongfeng]

你认为的标准的组件长啥样

我来列两种，欢迎讨论和补充

1. 基于 React.Component 的标准组件

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class EsComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: ['1', '2']
    }
    this.update = this.update.bind(this)
  }
  update(){
    this.setState({
      data: ['1', '2', '3']
    })
  }
  listRender(){
    return this.state.data.map( item => {
      return (
        <div key={item}>
          {item}
        </div>
      )
    })
  }
  render(){
    let listNodes = this.listRender()

    return (
      <div onClick={this.update}>
        { this.props.name }
        <div className="demo">
          { nodes }
        </div>
      </div>
    )
  }
}

EsComponent.propTypes = {
  name: propTypes.string.isRequired
}

export default EsComponent

2. 无状态纯函数组件

function Button({ onClick, children }) {
  return (
    <button onClick={onClick} type="button">
      {children}
    </button>
  );
}

[BoyuZhou]

标准组件，建议将propTypes 写在组件上边，因为如果是公用组件，我想使用这个组件，第一眼是想先看可传入什么props，及props类型。这样查看组件内容时心里也会有一个预期，写在上边相对直观人性化一些。
import React, { Component } from 'react'
import PropTypes from 'prop-types'

const propTypes = {
}

class EsComponent extends Component {

}

EsComponent.propTypes = propTypes ;

export default EsComponent

[BoyuZhou]

对于react key的一个小观点

对于循环产出的jsx，react要求设置key值，类似于

//bad

this.state.dataAry.map((item, index) => {
return <span key={index} />
})

//good

this.state.dataAry.map((item, index) => {
return <span key={item.id} />
})

对于key的设定，如果是设置为index，在数据变更后，如果是index,数组顺序会发生改变，react会全部重新渲染，但是如果是id，很很大程度上重用之前的元素。

[GuoYongfeng]

常用移动端组件

基于目前的几个项目，对于移动端组件的需求，其实并不多，先期从这几个场景入口，提供单独易用的组件，可以很好的提高开发效率。后续可以基于此丰富组件。

1. 按钮
2. 弹框、提示框、浮层、toast
3. 轮播
4. tab滑动页签
5. 时间日期
6. 表单及表单校验
7. List 列表

@ahua52

[BoyuZhou]

性能小建议

对于简单的组件，更建议使用木偶组件（纯函数）及PureComponent(react 15.3版本及以上)来书写组件。
木偶组件因为是纯函数，不包含组件生命周期及React.Component上的一些方法，所以会占用更少的内存，有更快的创建速度。适合不使用生命周期及没有内部状态的组件，纯展示或是有简单的props构成的组件。

function SomeComponent(data){
  return (
   <div>{data}</div>
  )
}

PureComponent是React在15.3版本以后提供的一种纯组件，它会在组件的shoudComponentUpdate中，自动比较props及state，如果没有改变，将不会执行其后的组件生命周期方法。所以可以优化组件渲染速度。一个问题是它只会浅比较。对于引用类型来说，如果指针没变，也不会更新组件。

import React, {PureComponent} from 'react';

class Child extends PureComponent {
  render() {
    return (
      <div>child</div>
    );
  }
}

[BoyuZhou]

如何定义一个开放的，易扩展的组件库组件

以下是我的一些看法：

• 样式
  • 组件提供className及style接口来扩展样式
  • 组件样式扁平化，无叠加易于覆盖
  • 组件样式命名做处理，避免冲突
• 内部结构
  • 组件内部结构松散，提供接口允许用户自定义。并提供默认内部DOM结构。
  • 组件DOM结构扁平化，容器类组件的子类由this.props.children形式存在,尽量不写死DOM结构，也不使用props传入。