React 教程
React 组件 API
在本章节中我们将讨论 React 组件 API。我们将讲解以下7个方法:
设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted
设置状态:setState
setState(object nextState[, function callback])
nextState，将要设置的新状态，该状态会和当前的state合并
callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。
合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。
关于setState
不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。
React 实例
var Counter = React.createClass({
getInitialState: function () {
return { clickCount: 0 };
handleClick: function () {
this.setState(function(state) {
return {clickCount: state.clickCount + 1};
render: function () {
return (&h2 onClick={this.handleClick}&点我！点击次数为: {this.state.clickCount}&/h2&);
ReactDOM.render(
&Counter /&,
document.getElementById('message')
实例中通过点击 h2 标签来使得点击计数器加 1。
替换状态：replaceState
replaceState(object nextState[, function callback])
nextState，将要设置的新状态，该状态会替换当前的state。
callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。
replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。
设置属性：setProps
setProps(object nextProps[, function callback])
nextProps，将要设置的新属性，该状态会和当前的props合并
callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。
设置组件属性，并重新渲染组件。
props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。
替换属性：replaceProps
replaceProps(object nextProps[, function callback])
nextProps，将要设置的新属性，该属性会替换当前的props。
callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。
replaceProps()方法与setProps类似，但它会删除原有
强制更新：forceUpdate
forceUpdate([function callback])
callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。
forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。
forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()
一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。
获取DOM节点：findDOMNode
DOMElement findDOMNode()
返回值：DOM元素DOMElement
如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。
判断组件挂载状态：isMounted
bool isMounted()
返回值：true或false，表示组件是否已挂载到DOM中
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。
本文参考：/javascript/react/EkACBdqKe.html
记住登录状态
重复输入密码react父组件调用子组件方法_中华文本库
配置参数 父组件可以直接将需要执行的函数传递给子组件: 然后在子组件中调用父组件方法: var ButtonComponent = React.createClass({ render: function(){ return ...
中创建了一个具有三个 li 子元素的 ul 元素,看...的目标容器,它的内容将被 render()方法 的执行改变...JavaScript 对象,用来 对 React 组件原型进行扩 展...
props获取(注:class要变为 ④ 组件属性用 ReactDOM...来更新和修改数据, 而子组件只能通过 props 来传递...相当于组件的数据流,它总是会从父组件向下传递至...
更多组件:https://react.parts/native,调用系统的,注意查看:支持 IOS or 安卓 组件和相关使用样式用这种方式定义,可以单独提出来成一个文件。 1.引入外部样式: ...
由于 React 的单向数据流性质,如果子组件需要更新父组件的状态,父组件就要传一...React 组件通过 store 直接获得数据,通过调用 action 来改变状态:这样简 http:/...
组件实现了 render() 方法,该方法返回 一个子级。...如果在一个节点上面调用 React.render(), 并且该...如果你倾 向于在子组件上使用 setProps(),不要...
当因为用户的 交互或者数据的获取而导致应用程序的状态发生改变时,React 快速地...props 是 React 中的一种从父组件向子组件传输数据的机制。它们在 子组件里面...
react native基础 认识、组件生命周期及核心组件的简单介绍_计算机软件及应用_IT/...componentWillReceiveProps(nextProps): props改变(父容器来更改),将会调用该函数...
ES5-写法 React.createClass React.createClass 不用多说,我们最早使用这个方法...当然,无状态组件也不是万金油,比如它不支持&ref&,原因很简单,因为 React 调用...
因为缩略图在 React Native 里面是一个图片组件,在...获取真实数据 从 Rotten Tomatoes 的 API获取数据并...call site 定制你的子组件的样式,你可以通过样式...父子组件相互传值_百度文库探索React：组件间通信过程解析
发表于 14:18|
来源RisingStack|
作者Péter Márton
摘要：《The React.js Way》系列博文重点分享React所具特性及最佳开发实践。本文为第二篇的译文，重点探讨了React组件间相互通信过程。
近日，RisingStack CTO Péter Márton正在陆续发表《The React.js Way》系列博文，文章以分享React.js的核心入门知识（）为主，并讨论了虚拟DOM的概念，以及如何使用组件的思维方式来思考开发的基础上。接下来，需要将它们组合起来运用到实战中去， 文章则以此为出发点，探讨了React的组件间是如何进行相互通信的。感谢对第二篇文章的翻译，内容如下：
组件即是函数
对于一个独立组件而言，你可以把它看成是一个JavaScript函数。对于函数而言，当你通过传递参数调用函数时，函数会返回给你一个值。 相比之下，对于React组件而言，道理是相似的，你传递属性给组件，而组件则会返回一个被渲染好的DOM。通过传递不同的数据，
相应的你会得到不同的响应。这个过程也就使得React组件能够得到极大的复用，并且你可以很轻松的在应用中重用和组装这些组件。 这种思想实际来源于函数式编程，但其并不在本文的讨论范围中。如果你感兴趣的话，那我强烈建议你阅读Mikael
Brevik的 《
》， 它可以帮助你更好的理解这个话题。
自上而下渲染
目前为止，我们可以轻松地通过组装组件的方式来构建应用，但此之前，在组件中并没有包括数据。在文章中，我们讨论过可以在组件层次中的根组件中通过将数据作为参数传递给组件，并且通过层层传递的方式将数据传递给下层组件，也就是说，你在顶层传递数据，它可以一层一层地往下传递，
这个过程，我们称之为自上而下的渲染。
从上层组件往下层组件传递数据其实很简单，但是，如果下层组件发生了某些变化，我们如何通知上层组件呢？例如，用户点击了某个按钮？ 我们需要某个东西来存放应用程序的状态数据，能够在状态发生变化的时候去通知所发生的变化。新的状态应该能够被传递给根节点
（最上层节点），然后应该再次发起自上而下的渲染，从而重新生成（渲染）DOM。为了解决这个问题，Facebook提出了Flux架构。
你可能已经听过什么是Flux，也了解它是一种类似于MVC的应用程序设计架构，因此本文不会过多的去探讨什么是Flux，感兴趣的话， 可以阅读《
》这篇文章。
构建用户界面的应用程序架构 ——
简单总结下：Flux倡导的是单向数据流的原则，在这种架构下，通过Store存放应用程序的状态数据。当应用状态发生变化时，Store可以发出事件，通知应用的组件并进行组件的重新渲染。另外，Dispatcher起到中央hub的作用，它为组件（View）和Store构建起了桥梁。此外，你可以在组件上调用action，它会向Store发起事件。Store正是通过订阅这些事件，并根据事件的触发来改变应用程序的内部状态的。
PureRenderMixin
目前对于我们的应用而言，我们通过一个数据store来存放应用的实际状态。我们可以和这个store进行通信，将数据传递到我们的应用上， 当组件获取新的数据后，进而对视图进行重新渲染。这听起来很赞，但总感觉会经历很多次的渲染，的确是这样的！需要记住的是：组件的层次关系和自然而下的渲染，一切都会根据新的数据来进行响应，做出相应的变化。
在这之前的文章中，我们讨论过虚拟DOM通过一种更为优雅的方式降低了DOM操纵带来的性能损耗，但这并不意味着我们就不需要自己手动进行性能优化了。
对此，基于当前数据和新来的数据之间的差异，我们应该能够告诉组件对于新来的数据是否需要进行视图的重新渲染（如果数据没有发生变化，应该不再重新渲染）。在React的生命周期中，你可以借助shouldComponentUpdate来达成这一目的。
幸运的是，在React中有一种被称为PureRenderMixin的Mixin模式，它可以用来对新的属性和之前的属性进行对比，如果是数据没有发生变化，就不再重新渲染。在内部实现上，它也是基于shouldComponentUpdate
这听起来很赞，但遗憾的是，PureRenderMixin并不能很好地进行对象的比较。它只会检查对象引用的相等性（===），也就是说， 对于有相同数据的不同对象而言它会返回false。
boolean shouldComponentUpdate(object nextProps, object nextState)如果shouldComponentUpdate返回的是false的话，render函数便会跳过，直到状态再次发生改变。（此外，componentWillUpdate
和componentDidUpdate也会被跳过）。对于上面所说的问题，我们可以简单的举个例子来说明，有代码如下：
var a = { foo: 'bar' };
var b = { foo: 'bar' };
a === // false
可以看到，数据是相同的，但它们隶属于不同对象的引用，因此返回的是false，也因此组件仍然会进行重新渲染，显然这没有达到我们的目的。
如果我们想要达成设想的效果（即对于相同数据而言，组件不再重新渲染），我们就需要在原始的对象上进行数据的修改：
var a = { foo: 'bar' };
b.foo = 'baz';
a === // true
虽然实现一个能够进行深度对象比较的mixin来代替引用检查并不困难，但是，考虑到React调用shouldComponentUpdate方法非常频繁，并且对象的深度检查代价较高，所以React选择了这种对象引用比较的方案。
我非常建议你阅读Facebook官方的
不变性 Immutability
如果我们的应用状态是一个单一的、大的、嵌套的对象（类似于Flux中的Store），那么上面提到的问题会逐渐升级。
所以当对象的内容没有发生变化时，或者有一个新的对象进来时，我们倾向于保持对象引用的不变。这个工作正是我们需要借助Facebook的Immutable.js来完成的。
不变性意味着数据一旦创建就不能被改变，这使得应用开发更为简单，避免保护性拷贝（defensive copy），并且使得在简单的应用逻辑中实现变化检查机制等。
下面通过一个例子来解释下上面的话。比如，有如下的代码片段：
如上，我们可以使用===来通过引用来比较对象，这意味着我们能够方便快速的进行对象比较，并且它能够和React中的PureRenderMixin
兼容。基于此，我们可以在整个应用构建中使用Immutable.js。也就是说，我们的Flux Store应该是一个具有不变性的对象，并且我们通过
将具有不变性的数据作为属性传递给我们的应用程序。
现在我们回到前面的代码片段来重新想象我们应用程序的组件结构，可以用下面这张图来表示：
如上，我们可以使用===来通过引用来比较对象，这意味着我们能够方便快速的进行对象比较，并且它能够和React中的PureRenderMixin
兼容。基于此，我们可以在整个应用构建中使用Immutable.js。也就是说，我们的Flux Store应该是一个具有不变性的对象，并且我们通过
将具有不变性的数据作为属性传递给我们的应用程序。
现在我们回到前面的代码片段来重新想象我们应用程序的组件结构，可以用下面这张图来表示：
如上，我们可以使用===来通过引用来比较对象，这意味着我们能够方便快速的进行对象比较，并且它能够和React中的PureRenderMixin
兼容。基于此，我们可以在整个应用构建中使用Immutable.js。也就是说，我们的Flux Store应该是一个具有不变性的对象，并且我们通过
将具有不变性的数据作为属性传递给我们的应用程序。
现在我们回到前面的代码片段来重新想象我们应用程序的组件结构，可以用下面这张图来表示：
var stateV1 = Immutable.fromJS({
{ name: 'Foo' },
{ name: 'Bar' }
var stateV2 = stateV1.updateIn(['users', 1], function () {
return Immutable.fromJS({
name: 'Barbar'
stateV1 === stateV2; // false
stateV1.getIn(['users', 0]) === stateV2.getIn(['users', 0]); // true
stateV1.getIn(['users', 1]) === stateV2.getIn(['users', 1]); // false
如上，我们可以使用===来通过引用比较对象，这意味着我们能够方便快速地进行对象比较，并且它能够和React中的PureRenderMixin
兼容。基于此，我们可以在整个应用构建中使用Immutable.js。也就是说，我们的Flux Store应该是一个具有不变性的对象，并且我们通过将具有不变性的数据作为属性传递给我们的应用程序。
现在我们回到前面的代码片段来重新想象我们应用程序的组件结构，可以用下面这张图来表示：
从上面的图形中你可以发现，在应用状态发生变化后，只有红色的部分会被重新渲染，因为其他部分的引用数据并没有发生变化。也就是说， 只有根组件和其中一部分的user组件会被重新渲染。
基于这种不变性，能够优化React组件的渲染路径，并通过这种方式来重新思考我们的应用构建和应用性能优化。此外，得益于虚拟DOM， 它能够让React应用比传统应用来得更加高效与快速。（责编：陈秋歌）
译者简介：景庄，前端工程师，关注Node.js、前端工程化。个人博客：。
欢迎加入CSDN前端交流群2：，进行前端技术交流。&&
也可参加CSDN前端大讲堂（微信公开课），享受高含金量在线公开课，与专家讲师在线切磋交流。
如何加入CSDN前端大讲堂？由于该群目前已超过人数限制，所以您首先不得不
扫描下面二维码，加CSDN编辑陈秋歌为好友，然后请她邀请您加入CSDN前端大讲堂微信群。加好友时，请务必注明“申请加入CSDN前端大讲堂”。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章}