React文档学习

针对《react快速上手开发完整版》的学习总结

简单实现一个react页面

  
     
       
        Hello React

几点总结：

ReactDOM 对象：这个对象只包含几个方法，包括常用的render方法。在旧版本中，这些方法曾经属于 React 对象；但从 0.14 版本开始，它们被分离出来，目的是强调应用渲染实际上属于单独的概念。
React.DOM 对象：内建组件，即React 提供的一个包裹层，它用于包裹 HTML DOM 元素。该包裹层可通过 React.DOM 对象进行调用。在第一个例子中，我们使用了 h1 组件。它对应于 HTML 的
元素，可以使用 React.DOM.h1()方法进行调用，该对象把各种各样的 HTML 元素当作 React 组件使用，是预定义好的包裹HTML 元素的集合。
document.getElementById("app") ：该方法访问 DOM 节点，render函数调用通过该参数告诉 React 需要把应用渲染在页面的哪个部分。
中的占位符被 React 应用生成的新内容所代替。

React.DOM

h1() 方法的首个参数接收一个对象（在这个例子中是空对象 null），用于指定该组件的任何属性（比如 DOM 属性），例如给组件传递 id 属性。第二个参数（在这个例子中是 "Hello world!"）定义了该组件的子元素，可以通过传递更多的函数参数，进行子元素的组合与嵌套。最简单的子元素就是上述例子中的文本（在 DOM 结构中是一个文本节点）

React.DOM.h1( 
  { 
    id: "my-heading", 
  }, 
  "Hello world!" 
),

下列几个 DOM 属性比较特殊，需要引起注意：class、for 和 style。
class 和 for 不能直接在 JavaScript 中使用，因为它们都是 JavaScript 中的关键字。取而代
之的属性名是 className 和 htmlFor。 style 属性则使用对象
示例：

React.DOM.h1( 
  { 
    className: "pretty", 
    htmlFor: "me", 
    style: { 
      background: "black", 
      color: "white", 
    } 
  }, 
  "Hello world!" 
);

生命周期

// 创建一个新组件的过程，必须实现 render() 方法，返回一个React组件
var Component = React.createClass({ 
  propTypes: { 
    name: React.PropTypes.string.isRequired, 
  }, 
  // 设置默认值，避免防御性代码
  getDefaultProps: function() { 
    return { 
      name: 'xiaoming'
    }; 
  }, 
  // 必须模块，输入React组件
  render: function() { 
    return React.DOM.span(null, "I'm" + this,props.name); 
  } 
});
// React.createElement() 是创建组件“实例”的方法之一
ReactDOM.render( 
  React.createElement(Component, {
    name: 'Bob'
  }), 
  document.getElementById("app") 
);

props:只读属性

Object.isFrozen(this.props) === true; // true

propTypes：声明props列表

通过预先声明组件期望接收的参数，让使用组件的用户不需要在 render() 方法的源代码中到处寻找该组件可配置的属性（这可能需要花费很长时间）。
React 会在运行时验证属性值的有效性。这使得你可以放心编写 render() 函数。

getDefaultProps()：默认属性值

当你的组件接收可选参数时,可以有效避免防御性代码var text = 'text' in this.props ? this.props.text : ''产生

state：组件渲染自身时用到的数据

当 state 发生改变时，React 会自动重建用户界面
只通过调用 setState() 改变state，其他时候可以把state看做只读属性（调用 setState() 后的界面更新是通过一个队列机制高效地进行批量修改的，直接改变 this.state 会导致意外行为的发生）
当 setState() 被调用时，React 调用render() 更新界面（例外：周期函数shouldComponentUpdate() 返回false可以避免界面更新，感觉这个跟vue的beforeUpdate()有点类似）
replaceState()：setState(obj) 会把属性和当前的 this.state 进行合并，而 replaceState() 则会完全重写所有状态。

getInitialState（）初始化state数据

getInitialState: function() { 
  return { 
    text: this.props.text, 
  }; 
},

componentWillReceiveProps（）接收新属性对象可以监听props的改变

 componentWillReceiveProps: function(newProps) { 
  this.setState({ 
    text: newProps.defaultValue, 
  }); 
},

componentWillUpdate（nextProps, nextState）

当你的组件再次渲染时，在 render() 方法前调用（在组件的 props 或者 state 发生改变时会触发该方法）。

componentDidUpdate（oldProps, oldState）

在 render() 函数执行完毕，且更新的组件已被同步到 DOM 后立即调用。该方法不会在初始化渲染时触发。

componentWillMount（）

在新节点插入 DOM 结构之前触发。

componentDidMount（）

在新节点插入 DOM 结构之后触发。

componentWillUnmount（）

在组件从 DOM 中移除时立刻触发。

shouldComponentUpdate(newProps, newState)

前方介绍过。这个方法在 componentWillUpdate() 之前触发，给你一个机会返回 false 以取消更新组件，这意味着 render() 方法将不会被调用。这在性能关键型的应用场景中非常有用。当你认为变更的内容没什么特别或者没有重新渲染的需要时，可以实现该方法。要决定是否更新，只需比较 newState 参数和目前的状态 this.state 的区别，以及 newProps 参数和目前的属性 this.props 的区别。当然，也可直接认为该组件是静态的而无需更新。

--未完--