针对《react快速上手开发完整版》的学习总结
- 简单实现一个react页面
<!DOCTYPE html> <html> <head> <title>Hello React</title> <meta charset="utf-8"> </head> <body> <div id="app"> <!--应用渲染的位置 --> </div> <script src="react/build/react.js"></script> <script src="react/build/react-dom.js"></script> <script> // 应用的JavaScript代码 ReactDOM.render( React.DOM.h1(null, "Hello world!"), document.getElementById("app") ); </script> </body> </html>几点总结：
- ReactDOM 对象：这个对象只包含几个方法，包括常用的
render方法。在旧版本中，这些方法曾经属于 React 对象；但从 0.14 版本开始，它们被分离出来，目的是强调应用渲染实际上属于单独的概念。 - React.DOM 对象：内建组件，即React 提供的一个包裹层，它用于包裹 HTML DOM 元素。该包裹层可通过 React.DOM 对象进行调用。在第一个例子中，我们使用了 h1 组件。它对应于 HTML 的 <h1> 元素，可以使用 React.DOM.h1()方法进行调用，该对象把各种各样的 HTML 元素当作 React 组件使用，是预定义好的 包裹HTML 元素的集合。
- document.getElementById("app") ：该方法访问 DOM 节点，
render函数调用通过该参数告诉 React 需要把应用渲染在页面的哪个部分。<div id="app">中的占位符被 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 的区别。当然，也可直接认为该组件是静态的而无需更新。
--未完--