[关闭]
@lizlalala 2016-05-07T11:32:30.000000Z 字数 2385 阅读 1010

react学习(三)

react


tips

react组件中主要包括四种属性:props,state,ref,key

其他笔记...

1. ref

  1. var myComponent = ReactDOM.render(<MyComponent />, myContainer);

(是由React.createClass({..})创建的,等同于React.createElement(tagName/componentName,props,childNodes).)

  1. 盗图
  2. render: function() {
  3. return (
  4. <TextInput
  5. ref={function(input) {
  6. if (input != null) {
  7. input.focus();
  8. }
  9. }} />
  10. );
  11. },

if string:

常用于 owner对owned组件属性、方法的调用,向子节点传递消息等。(this.refs.myTextInput会返回真实DOM node,底层是用ReactDOM.
findDOMNode去查找,且只针对mounted dom有效)

  1. var MyComponent = React.createClass({
  2. handleClick: function() {
  3. this.refs.myTextInput.focus();
  4. },
  5. render: function() {
  6. return (
  7. <div>
  8. <input type="text" ref="myTextInput" />
  9. <input type="button" value="Focus the text input" onClick={this.handleClick} />
  10. </div>
  11. );
  12. }
  13. });

2. this.state

setState() 并不立刻改变state的值(因此调用后有可能仍然获取的是上一个状态的值),会创建一个针对state变化的transition。

Q1:选择哪些数据作为state?

让我们分析每一项,指出哪一个是 state 。简单地对每一项数据提出三个问题:

  1. 是否是从父级通过 props 传入的?如果是,可能不是 state 。
  2. 是否会随着时间改变?如果不是,可能不是 state 。
  3. 能根据组件中其它 state 数据或者 props 计算出来吗?如果是,就不是 state 。

Q2:选择哪个组件来拥有state属性

对于应用中的每一个 state 数据:

  • 找出每一个基于那个 state 渲染界面的组件。

  • 找出共同的祖先组件(某个单个的组件,在组件树中位于需要这个 state 的所有组件的上面)。

  • 要么是共同的祖先组件,要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。
  • 如果找不出拥有这个 state 数据模型的合适的组件,创建一个新的组件来维护这个 state ,然后添加到组件树中,层级位于所有共同拥有者组件的上面。

3. component的生命周期:

will,did, | Mount,unMount,update 各种组合

+ componentWillReceiveProps(object nextProps)

+ shouldComponentUpdate(object nextProps, object nextState)

注意使用场景(服务端or客户端),何时调用(插入前or后or更新)

eg.
componentWillMount

服务器端和客户端都只调用一次,在初始化渲染执行之前立刻调用。如果在这个方法内调用 setState,render() 将会感知到更新后的 state,将会执行仅一次,尽管 state 改变了。

componentDidMount
在初始化渲染执行之后立刻调用一次,仅客户端有效(服务器端不会调用)。

4. react声称快速的原因

React 设计目标:使 API 看起来就像每一次有数据更新的时候,整个应用重新渲染了一样。

原本操作DOM慢-》virtual dom中通过下面的diff方法计算需要更新的dom,将这部分写入真正dom,以避免频繁操作dom。

两个节点的差异检查(Pair-wise diff)并更新

因为操作的虚拟DOM是内存数据,性能很高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的

5. prop

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注