02月09, 2017

如何优雅地写react

如何优雅的写react

使用react写项目的时候,代码如何写的简洁易懂,小结如下。

优雅的组件应该是这样的....

  • are easy to understand even without comments
  • can be even more performant than clunky code
  • increase the chances of catching bugs before they reach QA
  • are concise and say a lot with a little

"Less is more." — Mies van der Rohe

SFC(The Stateless Functional Component) 函数式无状态组件

我们编写组件的时候,并不是所有的组件都是需要状态的。由于react是以数据驱动,数据决定了react组件的输出结果,所以为了让我们组件更好控制,应该尽量的少使用状态。

栗子

let Hello = props => <div>Hello {props.name}</div>

还可以利用es6的解构赋值再来精简,适用于props的数量少的时候

let Hello = ({name}) => <div>Hello {name}</div>

1.无生命周期函数 一个组件就是一个函数,函数应该是谈不上生命周期的,但是组件却是有生命周期,stateless functions 没有生命周期。当然了,我们其实可以使用高阶组件 去实现生命周期。

2.没有 this 在 stateless functions 中,this 是 undefined,所以是不能使用 this 变量。不过换个角度思考,this 是在运行时随时可以被修改或重新赋值,跟外界环境有着密切的联系,正是不使用this才会让组件变得更纯。

3.使用到refs时不能使用无状态组件,因为无状态组件只是函数,所以它没有实例返回,这点在想用 refs 获取无状态组件的时候要注意

条件判断

JSX不支持if条件判断,使用三元判断来显示不同的组件。

类型1:A或者B

render() {
  <div class="search-results-container">
    {this.props.isGrid
      ? <SearchResultsGrid />
      : <SearchResultsList />}
  </div>
}

类型2:展示或者不展示

render() {
  <div class="search-results-list">
    {this.props.isSoftSort
      ? <SoftSortBanner />
      : null
    }
  </div>
}

这样写没问题,但是那个null总是怪怪的。 一种更优雅的方式:

render() {
  <div class="search-results-list">
    {!!this.props.isSoftSort && <SoftSortBanner />}
  </div>
}

PS:!!不要省略,否则一些逻辑非(比如数字0)就会在react渲染出来。

箭头函数(哦,好用!)

当你只需要一个参数或者多个参数(需要用小括号包裹参数)的简单函数时,可以使用新标准中的箭头函数,它的语法非常简单:标识符=>表达式。无需输入function和return,一些小括号、大括号以及分号也可以省略。

const SoftSort = ({ hardSortUrl, sortByName, onClick }) => {
  return (
    <div className="SearchInfoMessage">
      Showing results sorted by both Relevance and {sortByName}.
      <Link
        href={`?${hardSortUrl}`}
        onClick={(ev) => onClick(ev, hardSortUrl)}>
        Sort results by {sortByName} only
      </Link>
    </div>
  );
};

普通function函数和箭头函数的行为有一个微妙的区别,箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。

本文链接:http://westpsk.com/post/react_tips.html

-- EOF --

Comments