react组件编写思路(二) - 编程思维

上一篇讲了 React 两种最常见的组件:受控组件和非受控组件。为了可用性,我们一般编写出来的组件希望支持这两种特性:可以通过组件自身的方法来改变组件的某(些)状态,也可以通过 props 的值的变化来改变组件自身的同一个(些)状态。

组件改变自己的状态只能通过改变 state 完成,而把 props 的变化反映到 state 却是可以通过生命周期函数来实现。首先还是拿上一篇中受控 alert 组件代码为例:

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    this.state = {
      content: '',
      show: false
    }
    this.show = ( content )=>{
      this.setState( {
        content: content,
        show: true
      } )
    }

    this.hide = ()=>{
      this.setState( {
        show: false
      } )
    }
  }
  render() {
    let style = {
      display: this.state.show ? 'fixed' : 'none'
    }
    return (
      <div class="my-alert" style={ style } >
        <div class="my-alert-tit">Alert</div>
        <div>{ this.state.content }</div>
        <div class="my-alert-footer">
          <button onClick={ this.hide }>确定</button>
        </div>
      </div>
    );
  }
}

组件初始化的时候构造函数会接受传入的 props ,而当组件的容器改变传入组件的 props 的值时会触发组件的 componentWillReceiveProps 的方法,在这个方法中我们可以把变化后的 props(nextProps) 通过 setState 映射成 state 的变化。那么我们需要做的就是给受控组件增加初始化 props 处理和在 componentWillReceiveProps 内 props 的处理。

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    this.state = {
      content: this.props.content || '',
      show: this.props.show || false
    }
    this.show = ( content )=>{
      this.setState( {
        content: content,
        show: true
      } )
    }

    this.hide = ()=>{
      this.setState( {
        show: false
      } )
    }
  }

  componentWillReceiveProps( nextProps ) {
    this.setState( nextProps );
  }

  render() {
    let style = {
      display: this.state.show ? 'fixed' : 'none'
    }
    return (
      <div class="my-alert" style={ style } >
        <div class="my-alert-tit">Alert</div>
        <div>{ this.state.content }</div>
        <div class="my-alert-footer">
          <button onClick={ this.hide }>确定</button>
        </div>
      </div>
    );
  }
}

那么针对同一个 alert 组件的使用就变得多样化,可以根据自己项目的需求来变化。譬如:

import { Alert } from 'Alert';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      alertMsg: '',
      showAlert: false
    }
    this.saveHandler = ()=>{
      // save ajax success
      this.refs.myAlert.show( 'Save successfully' );
    }
    this.removeHandler = ()=>{
      // remove ajax success
      this.setState( {
        alertMsg: 'Remove successfully',
        showAlert: true
      } )
    }
  }

  render() {
    <div>
      <button onClick={ this.saveHandler }>Save</button>
      <button onClick={ this.removeHandler }>Remove</button>
      <Alert ref="myAlert" content={ this.state.alertMsg } show={ this.state.showAlert }/>
    </div>
  }
}

为了让组件更健壮,我们对 state 和 props 的一些必须的初始化值(默认值)需要明确指定

class Alert extends React.Component {
  constructor( props ) {
    super( props )
    let content = this.props.content;
    let show = this.props.show;
    /*
      props.xxx 的优先级比 props.defautXxx 高,
      如果设置了props.xxx 则 props.defaultXxx 就不起作用
    */
    this.state = {
      content: content === undefined ? this.props.defaultContent : content
      show: show === undefined ? this.props.defaultShow : show
    }
  }
}
Alert.propTypes = {
  defaultShow: React.PropTypes.bool,
  defaultContent: React.PropTypes.string,
  show: React.PropTypes.bool,
  content: React.PropTypes.string
}

Alert.defaultProps = {
  defaultShow: false,
  defaultContent: ''
}

如上代码如果对 props.xxx 和 props.defaultXxx 有迷惑的童鞋,其实有了 xxx 完全没有必要再有 defaultXxx,但是参考一些组件库的 api 设计,我理解为是为了保持受控组件 api 的统一性,如果把 alert 组件当成受控组件则初始化使用 defaultXxx,如果当成非受控组件就直接使用 xxx。

那什么时候使用受控组件,什么时候使用非受控组件呢?我们知道受控组件是比较符合我们传统 UI 组件开发的思路的。但是 React 在跨组件通讯方面很弱,如果不借助第三方库进行通讯,对于两个毫无关系的组件相互调用就需要传递层层的回调函数。我想没有人喜欢这种编程风格,所以把所有组件的状态抽象到一个地方进行集中管理变化,典型的数据流用 redux 就倾向于使用非受控组件了(这里不讨论flux思想的由来,不讨论redux好坏)。

故最基本的 React 组件编写套路就这些。但是这些还只是 api 应用层面的东西,比较难的是在编写组件时候对状态的抽象,使使用者使用的舒服自然。

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://segmentfault.com/a/1190000009396514

前端周刊第55期:10x 程序员? - 编程思维

共 2127 字,读完需 4 分钟。我本周读到 1 篇比较有趣的文章叫做《The 10x developer is NOT a myth》,不管你承不承认,也不管你有没有意识到,程序员的效率有时会有天壤之别,10X 程序员的概念很早就出现了,怎样才算 10X 程序员?跟普通程序员的区别在哪里?推荐你抽时间细读,如果你不

react组件编写思路(一) - 编程思维

新手写 React 组件往往无从入手,怎么写,什么时候用 props,什么时候用 state 摸不着头脑。其实是没有了解到 React 的一些思想。就我个人的经验大多数的组件都有一定的套路可言,接下来就先介绍下 React 组件的基本思想。 React 组件可以分为可控组件和非可控组件。可控组件意思是组件自身控制自己的

react 高阶组件(hoc)入门指南 - 编程思维

  之前的文章React Mixins入门指南介绍了React Mixin的使用。在实际使用中React Mixin的作用还是非常强大的,能够使得我们在多个组件中共用相同的方法。但是工程中大量使用Mixin也会带来非常多的问题。Dan Abramov在文章[Mixins Considered Harmful](http

关于this.setstate更新的问题 - 编程思维

this.setState是异步,所以在this.setState之后立即调用this.state是获取不到最新的数据的,那么怎么获取最新的数据呢?下面介绍三个方法: 1.回调函数callback this.setState({ val: this.state.val+1 }, () => { conso