针对《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 的区别。当然，也可直接认为该组件是静态的而无需更新。
JSX
因为之前多少使用过JSX，这里就总结一下要点
- {}内使用js表达式
- jsx注释建议为如下格式
/* ... */- 使用html实体来防范xss攻击
- 灵活使用展开运算符
- render函数顶部必须返回单个顶层节点
- style是对象
- 所有标签都需要闭合
- 驼峰法命名属性
- value 总是和文本输入框的最新内容保持一致，设置initialData或者defaultValue的值来指定默认值
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。