React Component

Stateless Functional Components

React Component 有 3 种定义方式，分别是 React.createClass, class 和 Stateless Functional Component。推荐尽量使用最后一种，保持简洁和无状态。这是函数，不是 Object，没有 this 作用域，是 pure function。

比如定义 App Component 。

  1. function App(props) {
  2.   function handleClick() {
  3.     props.dispatch({ type: 'app/create' });
  4.   }
  5.   return <div onClick={handleClick}>${props.name}</div>
  6. }

等同于：

  1. class App extends React.Component {
  2.   handleClick() {
  3.     this.props.dispatch({ type: 'app/create' });
  4.   }
  5.   render() {
  6.     return <div onClick={this.handleClick.bind(this)}>${this.props.name}</div>
  7.   }
  8. }

JSX

Component 嵌套

类似 HTML，JSX 里可以给组件添加子组件。

  1. <App>
  2.   <Header />
  3.   <MainContent />
  4.   <Footer />
  5. </App>

className

class 是保留词，所以添加样式时，需用 className 代替 class 。

  1. <h1 className="fancy">Hello dva</h1>

JavaScript 表达式

JavaScript 表达式需要用 {} 括起来，会执行并返回结果。

比如：

  1. <h1>{ this.props.title }</h1>

Mapping Arrays to JSX

可以把数组映射为 JSX 元素列表。

  1. <ul>
  2.   { this.props.todos.map((todo, i) => <li key={i}>{todo}</li>) }
  3. </ul>

注释

尽量别用 // 做单行注释。

  1. <h1>
  2.   {/* multiline comment */}
  3.   {/*
  4.     multi
  5.     line
  6.     comment
  7.     */}
  8.   {
  9.     // single line
  10.   }
  11.   Hello
  12. </h1>

Spread Attributes

这是 JSX 从 ECMAScript6 借鉴过来的很有用的特性，用于扩充组件 props 。

比如：

  1. const attrs = {
  2.   href: 'http://example.org',
  3.   target: '_blank',
  4. };
  5. <a {...attrs}>Hello</a>

等同于

  1. const attrs = {
  2.   href: 'http://example.org',
  3.   target: '_blank',
  4. };
  5. <a href={attrs.href} target={attrs.target}>Hello</a>

Props

数据处理在 React 中是非常重要的概念之一，分别可以通过 props, state 和 context 来处理数据。而在 dva 应用里，你只需关心 props 。

propTypes

JavaScript 是弱类型语言，所以请尽量声明 propTypes 对 props 进行校验，以减少不必要的问题。

  1. function App(props) {
  2.   return <div>{props.name}</div>;
  3. }
  4. App.propTypes = {
  5.   name: React.PropTypes.string.isRequired,
  6. };

内置的 prop type 有：

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string

往下传数据

React Component - 图1

往上传数据

React Component - 图2

CSS Modules

React Component - 图3

理解 CSS Modules

一张图理解 CSS Modules 的工作原理：

React Component - 图4

button class 在构建之后会被重命名为 ProductList_button_1FU0u 。button 是 local name，而 ProductList_button_1FU0u 是 global name 。你可以用简短的描述性名字，而不需要关心命名冲突问题。

然后你要做的全部事情就是在 css/less 文件里写 .button {…}，并在组件里通过 styles.button 来引用他。

定义全局 CSS

CSS Modules 默认是局部作用域的，想要声明一个全局规则，可用 :global 语法。

比如：

  1. .title {
  2.   color: red;
  3. }
  4. :global(.title) {
  5.   color: green;
  6. }

然后在引用的时候：

  1. <App className={styles.title} /> // red
  2. <App className="title" />        // green

classnames Package

在一些复杂的场景中，一个元素可能对应多个 className，而每个 className 又基于一些条件来决定是否出现。这时，classnames 这个库就非常有用。

  1. import classnames from 'classnames';
  2. const App = (props) => {
  3.   const cls = classnames({
  4.     btn: true,
  5.     btnLarge: props.type === 'submit',
  6.     btnSmall: props.type === 'edit',
  7.   });
  8.   return <div className={ cls } />;
  9. }

这样，传入不同的 type 给 App 组件，就会返回不同的 className 组合：

  1. <App type="submit" /> // btn btnLarge
  2. <App type="edit" />   // btn btnSmall