React初学者教程 - 版本历史

Tom：/* 在 React 中访问 DOM 元素 */

2017-11-02T07:20:33Z

‎在 React 中访问 DOM 元素

Tom：/* 用 React 常见一个简单的 Todo List 应用 */

2017-11-02T06:47:30Z

‎用 React 常见一个简单的 Todo List 应用

Tom：/* 用 React Router 创建单页应用 */

2017-11-02T03:21:26Z

‎用 React Router 创建单页应用

显示更改

Tom：/* 用 React Router 创建单页应用 */

2017-11-02T02:38:31Z

‎用 React Router 创建单页应用

Tom：/* 用 React Router 创建单页应用 */

2017-11-02T02:37:31Z

‎用 React Router 创建单页应用

Tom：/* 用 React Router 创建单页应用 */

2017-11-02T02:37:07Z

‎用 React Router 创建单页应用

Tom：/* 用 React Router 创建单页应用 */

2017-11-02T02:36:45Z

‎用 React Router 创建单页应用

Tom：/* 用 React Router 创建单页应用 */

2017-11-02T02:36:26Z

‎用 React Router 创建单页应用

Tom：/* 看看生命周期方法起作用 */

2017-11-02T02:30:19Z

‎看看生命周期方法起作用

Tom：/* 组件生命周期 */

2017-11-01T10:18:33Z

‎组件生命周期

←上一版本		2017年11月2日 (四) 07:20的版本
第1,484行：		第1,484行：

	==在 React 中访问 DOM 元素==		==在 React 中访问 DOM 元素==
		+
		+	有时我们需要直接访问 HTML 元素上的属性和方法。在 React 的缤纷世界里，JSX 代表纯粹的标记，那么为什么你会想要直接处理可怕的 HTML 呢？因为你会发现，很多时候直接通过 JavaScript DOM API 处理 HTML 元素，比用 React 的方式更简单。
		+
		+	===初始 refs===
		+
		+	===用 ES6 箭头函数进一步简化===
		+
		+	===总结===
		+
		+	在本教程中，我们看到直接访问 DOM 是如何 “简单” 。React 过去提供了相当简单的方式引用元素，就是在元素上设置 refs 属性，并初始化它为一个字符串值：
		+
		+	<button refs="myButton">Click me!</button>
		+
		+	然后，在组件挂载之后，你就可以通过做点像 this.refs.myButton 这样的事情来访问该元素。但是先不要激动，这种基于字符串的方法已经被废弃了。在本文编写的时候还能用，但是谁知道以后能不能用呢？

	==设置 React 开发环境==		==设置 React 开发环境==

@@ 第1,421行： / 第1,421行： @@
 ==用 React 常见一个简单的 Todo List 应用==
 ==在 React 中访问 DOM 元素==
 ==设置 React 开发环境==

←上一版本		2017年11月2日 (四) 02:38的版本
第1,181行：		第1,181行：


−	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[~~在浏览器窗口中打开这个页面~~ https://www.kirupa.com/react/examples/react_router_final.htm]，用后退和前进按钮来看看。	+	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[https://www.kirupa.com/react/examples/react_router_final.htm 在浏览器窗口中打开这个页面]，用后退和前进按钮来看看。

←上一版本		2017年11月2日 (四) 02:37的版本
第1,181行：		第1,181行：


−	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[[在浏览器窗口中打开这个页面 \| https://www.kirupa.com/react/examples/react_router_final.htm]]，用后退和前进按钮来看看。	+	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[在浏览器窗口中打开这个页面 https://www.kirupa.com/react/examples/react_router_final.htm]，用后退和前进按钮来看看。

←上一版本		2017年11月2日 (四) 02:37的版本
第1,181行：		第1,181行：


−	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[在浏览器窗口中打开这个页面 \| https://www.kirupa.com/react/examples/react_router_final.htm#/]，用后退和前进按钮来看看。	+	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[[在浏览器窗口中打开这个页面 \| https://www.kirupa.com/react/examples/react_router_final.htm]]，用后退和前进按钮来看看。

←上一版本		2017年11月2日 (四) 02:36的版本
第1,181行：		第1,181行：


−	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[在浏览器窗口中打开这个页面 https://www.kirupa.com/react/examples/react_router_final.htm#/]，用后退和前进按钮来看看。	+	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[在浏览器窗口中打开这个页面 \| https://www.kirupa.com/react/examples/react_router_final.htm#/]，用后退和前进按钮来看看。

←上一版本		2017年11月2日 (四) 02:36的版本
第1,175行：		第1,175行：

	==用 React Router 创建单页应用==		==用 React Router 创建单页应用==
		+
		+
		+
		+
		+
		+
		+	这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便[在浏览器窗口中打开这个页面 https://www.kirupa.com/react/examples/react_router_final.htm#/]，用后退和前进按钮来看看。
		+
		+
		+
		+	https://www.w3cplus.com/sites/default/files/blogs/2016/1611/router_highlight_link.png

	==用 React 常见一个简单的 Todo List 应用==		==用 React 常见一个简单的 Todo List 应用==

←上一版本		2017年11月2日 (四) 02:30的版本
第1,048行：		第1,048行：

	===看看生命周期方法起作用===		===看看生命周期方法起作用===
		+
		+	<source lang="javascript">
		+	var destination = document.querySelector("#container");
		+
		+	var Counter = React.createClass({
		+	render: function () {
		+	var textStyle = {
		+	fontSize: 72,
		+	fontFamily: "sans-serif",
		+	color: "#333",
		+	fontWeight: "bold"
		+	};
		+
		+	return (
		+	<div style={textStyle}> {this.props.display} </div>
		+	);
		+	}
		+	});
		+
		+	var CounterParent = React.createClass({
		+	getDefaultProps: function () {
		+	console.log("getDefaultProps: Default prop time!");
		+	return {};
		+	},
		+	getInitialState: function () {
		+	console.log("getInitialState: Default state time!");
		+	return {count: 0};
		+	},
		+	increase: function () {
		+	this.setState({count: this.state.count + 1});
		+	},
		+	componentWillUpdate: function (newProps, newState) {
		+	console.log("componentWillUpdate: Component is about to update!");
		+	},
		+	componentDidUpdate: function (currentProps, currentState) {
		+	console.log("componentDidUpdate: Component just updated!");
		+	},
		+	componentWillMount: function () {
		+	console.log("componentWillMount: Component is about to mount!");
		+	},
		+	componentDidMount: function () {
		+	console.log("componentDidMount: Component just mounted!");
		+	},
		+	componentWillUnmount: function () {
		+	console.log("componentWillUnmount: Component is about to be removed from the DOM!");
		+	},
		+	shouldComponentUpdate: function (newProps, newState) {
		+	console.log("shouldComponentUpdate: Should component update?");
		+	if (newState.count < 5) {
		+	console.log("shouldComponentUpdate: Component should update!");
		+	return true;
		+	} else {
		+	ReactDOM.unmountComponentAtNode(destination);
		+	console.log("shouldComponentUpdate: Component should not update!");
		+	return false;
		+	}
		+	},
		+	componentWillReceiveProps: function (newProps) {
		+	console.log("componentWillReceiveProps: Component will get new props!");
		+	},
		+	render: function () {
		+	var backgroundStyle = {
		+	padding: 50, border: "#333 2px dotted", width: 250, height: 100, borderRadius: 10, textAlign: "center"
		+	};
		+
		+	return (
		+	<div style={backgroundStyle}>
		+	<Counter display={this.state.count}/>
		+	<button onClick={this.increase}> +</button>
		+	</div>
		+	);
		+	}
		+	});
		+
		+	ReactDOM.render(
		+	<div><CounterParent/></div>,
		+	destination
		+	);
		+	</source>
		+
		+	===初始渲染阶段===
		+
		+	https://www.w3cplus.com/sites/default/files/blogs/2016/1611/render_144.png
		+
		+	除了 render 方法外，所有这些生命周期方法只能触发一次。这与我们下面要看到的方法有很大不同。
		+
		+	===更新阶段===
		+
		+	https://www.w3cplus.com/sites/default/files/blogs/2016/1611/statechange_144.png
		+
		+	shouldComponentUpdate 有时，当一个状态发生改变时，你不想让组件更新。这个方法可以让我们控制更新行为。如果你使用该方法，并返回一个 true 值，组件就会被更新。如果返回一个 false 值，该组件就不会更新。
		+
		+	如下是一个简单的示例：
		+
		+	<source lang="javascript">
		+	shouldComponentUpdate: function(newProps, newState) {
		+	if (newState.id <= 2) {
		+	console.log("Component should update!");
		+	return true;
		+	} else {
		+	console.log("Component should not update!");
		+	return false;
		+	}
		+	}
		+	</source>
		+
		+	该方法带有两个参数：newProps 和 newState。
		+
		+	===处理 prop 改变===
		+
		+	https://www.w3cplus.com/sites/default/files/blogs/2016/1611/propschange_144.png
		+
		+	这里唯一的新方法是 componentWillReceiveProps。该方法只返回一个参数，并且该参数包含将要赋值的新 prop 值。
		+
		+	剩下的生命周期方法我们在前面查看状态改变时已经看过了，所以这里就不在重复了。在处理 prop 修改时，它们的行为是一致的。
		+
		+	===卸载阶段===
		+
		+	https://www.w3cplus.com/sites/default/files/blogs/2016/1611/unmount_144.png
		+
		+	这里唯一的生命周期方法是 componentWillUnmount。我们可以在这个方法中执行清理相关的任务，比如移除事件监听器、停止计数器等等。在该方法被调用后，组件就从 DOM 中移除，你可以对它说拜拜了。
		+
		+	===总结===
		+
		+	React 不断地在每次有兴趣的事情发生时候监视和通知组件。这都是通过生命周期方法实现的。现在，我想安慰你的是，知道每个生命周期方法做什么以及什么时候它被调用，是总有一天会派上用场的。你所学的一切并非仅是繁琐的知识，如果你能凭记忆描述所有生命周期方法，你的朋友们会被打动的。

	==用 React Router 创建单页应用==		==用 React Router 创建单页应用==

←上一版本		2017年11月1日 (三) 10:18的版本
第1,023行：		第1,023行：

	==组件生命周期==		==组件生命周期==
		+
		+	为帮助做这些事情，React 给我们提供了一些生命周期方法。生命周期方法是组件正常运转时自动调用的特殊方法。它们告知我们组件生命中重要的里程碑，我们可以用这些通知来只是注意，或者改变组件要做的事情。
		+
		+
		+	===初识生命周期方法===
		+
		+	生命周期方法不是很复杂。我们可以把它们当作是在组件生命中的不同的点被调用的美化的事件处理器，并且就像事件处理器一样，我们可以在这些不同的点编写代码做一些事情。在深入之前，我们先来快速了解一下生命周期方法。
		+
		+	* componentWillMount
		+	* componentDidMount
		+	* componentWillUnmount
		+	* componentWillUpdate
		+	* componentDidUpdate
		+	* shouldComponentUpdate
		+	* componentWillReceiveProps
		+
		+	还有三个方法严格上讲并非生命周期方法，但是我们仍要把它们跟生命周期方法混在一起。
		+
		+	* getInitialState
		+	* getDefaultProps
		+	* render
		+
		+	这些方法中，有些名称可能看起来是熟悉，有些可能是第一次看到。不要着急。在本教程结束后，你对所有这些方法都很熟悉。我们打算要做的是从不同角度看看这些生命周期方法。我们还是以代码开始！
		+
		+	===看看生命周期方法起作用===

	==用 React Router 创建单页应用==		==用 React Router 创建单页应用==