Interactivity and Dynamic UIs

React.findDOMNode()

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 React.findDOMNode 方法。

var@H_502_9@ MyComponent = React.createClass({
  handleClick: function@H_502_9@()@H_502_9@ {@H_502_9@
    React.findDOMNode(this@H_502_9@.refs.myTextInput).focus();
  },render: function@H_502_9@()@H_502_9@ {@H_502_9@
    return@H_502_9@ (
      <div>
        <input type="text"@H_502_9@ ref="myTextInput"@H_502_9@ />
        <input type="button"@H_502_9@ value="Focus the text input"@H_502_9@ onClick={this@H_502_9@.handleClick} />
      </div>
    );
  }
});
React.render(
  <MyComponent />,document.getElementById('example'@H_502_9@)
);

需要注意的是，由于 React.findDOMNode 方法获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个方法，否则会返回 null 。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会调用 React.findDOMNode 方法。

getInitialState

设置State的初始状态。

var@H_502_9@ MyComponent = React.createClass({
    getInitialState: function@H_502_9@()@H_502_9@{@H_502_9@
        return@H_502_9@ {
            count: 5@H_502_9@
        }
    },render: function@H_502_9@()@H_502_9@{@H_502_9@
        return@H_502_9@ (
            <h1>{this@H_502_9@.state.count}</h1>
        )
    }
});

Style

参考资料

[React行内样式最佳实践][7]

Inline-style

在React中，如果要使用行内元素，不可以直接使用style="”这种方式，可以有：

import React from 'react'@H_502_9@;
var@H_502_9@ style = {
  backgroundColor: '#EEE'@H_502_9@
};
export default@H_502_9@ React.createClass({
  render: function@H_502_9@ ()@H_502_9@ {@H_502_9@
    return@H_502_9@ (
      <div@H_502_9@ style@H_502_9@={style}@H_502_9@>@H_502_9@ //或者<div@H_502_9@ style@H_502_9@={{backgroundColor:@H_502_9@ '#EEE@H_502_9@'}}>@H_502_9@ <h1@H_502_9@>@H_502_9@Hello world</h1@H_502_9@>@H_502_9@ </div@H_502_9@>@H_502_9@ ) } });@H_502_9@

可以看出，React的style属性接收的也是一个JavaScript对象。

Class

你可以根据这个策略为每个组件创建 CSS 文件，可以让组件名和 CSS 中的 class 使用一个命名空间，来避免一个组件中的一些 class 干扰到另外一些组件的 class。

app/components/MyComponent.css

.MyComponent-wrapper@H_502_9@ { background-color@H_502_9@: #EEE@H_502_9@@H_502_9@@H_502_9@; }@H_502_9@@H_502_9@

app/components/MyComponent.jsx

import './MyComponent.css'@H_502_9@;
import React from 'react'@H_502_9@;
export default@H_502_9@ React.createClass({
  render: function@H_502_9@ ()@H_502_9@ {@H_502_9@
    return@H_502_9@ (
      <div@H_502_9@ className@H_502_9@="MyComponent-wrapper"@H_502_9@>@H_502_9@ <h1@H_502_9@>@H_502_9@Hello world</h1@H_502_9@>@H_502_9@ </div@H_502_9@>@H_502_9@ ) } });@H_502_9@

Multiple Class

上文中提及的利用className方式赋值，如果在存在多个类名的情况下：

render: function@H_502_9@()@H_502_9@ {@H_502_9@
  var@H_502_9@ cx = React.addons.classSet;
  var@H_502_9@ classes = cx({
    'message'@H_502_9@: true@H_502_9@,'message-important'@H_502_9@: this@H_502_9@.props.isImportant,'message-read'@H_502_9@: this@H_502_9@.props.isRead
  });
  // same final string,but much cleaner@H_502_9@
  return@H_502_9@ <div@H_502_9@ className@H_502_9@={classes}@H_502_9@>@H_502_9@Great,I'll be there.</div@H_502_9@>@H_502_9@;@H_502_9@
}

Event

React对于事件的支持非常完善，可以查看[这里][8]。React 实现了一个“合成事件”层（synthetic event system），这个事件模型保证了和 W3C 标准保持一致，所以不用担心有什么诡异的用法，并且这个事件层消除了 IE 与 W3C 标准实现之间的兼容问题。“合成事件”额外提供了两个好处：**自动绑定上下文和事件委托**

“合成事件”自动将事处理件方法的上下文绑到当前组件，所以 handleClick 方法里面可以直接使用this.setState。
“合成事件”会以事件委托（event delegation）的方式绑定到组件最上层，并且在组件卸载（unmount）的时候自动销毁绑定的事件。

当然，在React中，也可以使用原生事件，比如你在 componentDidMount 方法里面通过 addEventListener 绑定的事件就是浏览器原生事件。使用原生事件的时候注意在 componentWillUnmount 解除绑定 removeEventListener。所有通过 JSX 这种方式绑定的事件都是绑定到“合成事件”，除非你有特别的理由，建议总是用 React 的方式处理事件。

Event Bind

最基本的绑定方式就是依靠类似于```onClick={handleClick}```的方式，要注意，这里不同于ng-click，onClick传递的参数只能是一个方法，而不能是一个调用。如果要简单来写的话可以采Lambda表达式的方式：

onClick={()=>{alert(1@H_502_9@);}}

Event Params

给事件处理函数传递额外参数的方式：`bind(this,arg1,arg2,...)`

render: function@H_502_9@()@H_502_9@ {@H_502_9@
    return@H_502_9@ <p@H_502_9@ onClick@H_502_9@={this.handleClick.bind(this,@H_502_9@ 'extra@H_502_9@ param@H_502_9@')}>@H_502_9@;@H_502_9@
},handleClick: function@H_502_9@(param,event)@H_502_9@ {@H_502_9@
    // handle click@H_502_9@
}

由上面可以看出，Event一般都是作为最后一个参数传递到handleClick中，这里的event是SyntheticEvent对象，它的主要属性如下：

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void@H_502_9@ preventDefault()
void@H_502_9@ isDefaultPrevented()
void@H_502_9@ stopPropagation()
void@H_502_9@ isPropagationStopped()
DOMEventTarget target
number timeStamp
string type

List Element

在React中，也会经常遇到需要为某个群组绑定事件的情况，可以参考如下代码：

var@H_502_9@ GroceryList = React.createClass({
  handleClick: function@H_502_9@(i)@H_502_9@ {@H_502_9@
    console.log('You clicked: '@H_502_9@ + this@H_502_9@.props.items[i]);
  },render: function@H_502_9@()@H_502_9@ {@H_502_9@
    return@H_502_9@ (
      <div@H_502_9@>@H_502_9@ {this.props.items.map(function(item,i) { return ( <div@H_502_9@ onClick@H_502_9@={this.handleClick.bind(this,@H_502_9@ i@H_502_9@)} key@H_502_9@={i}@H_502_9@>@H_502_9@{item}</div@H_502_9@>@H_502_9@ ); },this)} </div@H_502_9@>@H_502_9@ ); } }); React.render( <GroceryList@H_502_9@ items@H_502_9@={['Apple',@H_502_9@ 'Banana@H_502_9@','Cranberry@H_502_9@']} />@H_502_9@,mountNode );@H_502_9@

TouchEvent

If you’d like to use React on a touch device such as a phone or tablet,simply call React.initializeTouchEvents(true); to enable touch event handling.

@H_250_403@接口暴露

譬如在某个子组件中，提供了某个方法：

var@H_502_9@ ButtonComponent = React.createClass({
    getDragonKillingSword: function@H_502_9@()@H_502_9@{@H_502_9@
        //送宝刀@H_502_9@
    },render: function@H_502_9@()@H_502_9@{@H_502_9@
        return@H_502_9@ (<button@H_502_9@ onClick@H_502_9@={this.getDragonKillingSword}@H_502_9@>@H_502_9@屠龙宝刀，点击就送</button@H_502_9@>@H_502_9@); } });@H_502_9@

如果在父组件中想手动调用该方法，则可以利用ref方式：

var@H_502_9@ ImDaddyComponent = React.createClass({
  render: function@H_502_9@()@H_502_9@{@H_502_9@
    return@H_502_9@ (
      <div@H_502_9@>@H_502_9@ //其他组件 <ButtonComponent@H_502_9@ />@H_502_9@ //其他组件 </div@H_502_9@>@H_502_9@ ); } });@H_502_9@

在父组件的功能方程中：

this@H_502_9@.refs.getSwordButton.getDragonKillingSword();

反之，如果需要在子组件中调用父组件的方法，则可以直接将父组件的方法作为Props参数传入到子组件中：

<ButtonComponent clickCallback={this@H_502_9@.getSwordButtonClickCallback}/>

Ajax

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以在componentDidMount 方法中设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI。

var@H_502_9@ UserGist = React.createClass({
      getInitialState: function@H_502_9@()@H_502_9@ {@H_502_9@
        return@H_502_9@ {
          username: ''@H_502_9@,lastGistUrl: ''@H_502_9@
        };
      },componentDidMount: function@H_502_9@()@H_502_9@ {@H_502_9@
        $.get(this@H_502_9@.props.source,function@H_502_9@(result)@H_502_9@ {@H_502_9@
          var@H_502_9@ lastGist = result[0@H_502_9@];
          if@H_502_9@ (this@H_502_9@.isMounted()) {
            this@H_502_9@.setState({
              username: lastGist.owner.login,lastGistUrl: lastGist.html_url
            });
          }
        }.bind(this@H_502_9@));
      },render: function@H_502_9@()@H_502_9@ {@H_502_9@
        return@H_502_9@ (
          <div@H_502_9@>@H_502_9@ {this.state.username}'s last gist is <a@H_502_9@ href@H_502_9@={this.state.lastGistUrl}@H_502_9@>@H_502_9@here</a@H_502_9@>@H_502_9@. </div@H_502_9@>@H_502_9@ ); } }); React.render( <UserGist@H_502_9@ source@H_502_9@="https://api.github.com/users/octocat/gists"@H_502_9@ />@H_502_9@,document.body );@H_502_9@

不过笔者习惯还是将整个获取数据，处理数据的业务逻辑放在Angular中进行。

React实践系列笔记-Interactivity and Dynamic UIs