react tricks
编辑中。。。
React 自身提供的 API 并不多，但总有一些比较 trick 的 API 和点是平时可能忽略的，本节将列举一下相关的点。
-
setState
setState function param
setState 延迟
-
ref
ref as function
区分 DOM node 和 React node
利用 ref 实现父组件到子组件的通信
-
children
top api reactChildren
children as a function
dangerouslySetInnerHTML
状态双向绑定
-
受控组件
通过 value=null 转变为非受控
radio buttons
setState
setState(function)
setState 的方法定义：
void setState(
function|object nextState,[function callback]
)
通常第一个参数为 object nextState ，nextState 会被 merge 到组件的 state 数据当中，根据定义可以看出第一个参数也可以为 function，当为函数时会获得两个参数 previousState、currentState ，其返回值当做 nextState 被 merge 到 state 中。
setState(function(previousState,currentProps) {
return {myInteger: previousState.myInteger + 1};
});
setState 延迟
首先介绍一下 transaction ，transaction 是数据库操作的概念，将对数据的操作通过 transaction 来表示，将操作和执行分离，下面以一个伪代码的方式表示对数据的操作步骤：
// 代码只是为了理解 transaction 和 react 无关
transactionManager = new TransactionManager
transactionManager.add(new Transaction(function(){
// 修改数据的操作1
}))
transactionManager.add(new Transaction(function(){
// 修改数据的操作2
}))
transactionManager.perform()
可以看到数据的修改操作和执行时分开的，React 和许多现代前端框架都借鉴了这一设计模式，将操作和执行分离 。 这样的好处是可以做到极大的性能优化，举个例子，我们知道 DOM 操作是极其耗时的，为了优化性能，我们可以将 DOM 操作合并一起执行。 React 的 DOM 更新也是合并执行的，这得益于 transaction 设计。
说了这么多，为的是理解 setState 的延时特性：setState 修改状态过后并不会立即生效，而是会被 React 批量执行（batch update）。
eg:
// state = {a:1}
this.setState({a:2});
console.log(this.state.a) // 1
注：transaction 在 React 中的设计和数据库的 transaction 是不同的，但不碍于理解这里的延迟批量执行策略，在 React 的实现章节中会详解 React 的 transaction 。
因为延迟执行的特性，不能用上面的方法同步获取最新状态，为了获取 setState 成功过后的状态，可以使用 callback,callback 会在修改 state 并重渲染过后调用
setState(nextState,function()) {
// do something after setState
})
ref
ref as function
在某些情况下，父组件可能需要引用子组件并调用其中的方法或找到子组件的 DOM，React 提供了 ref 属性作为实现方式，通常的做法是传递一个字符串，然后在组件中引用 refs。
eg:
<input ref="myInput" />
var input = this.refs.myInput; var inputValue = input.value; var inputRect = input.getBoundingClientRect();
ref 也可以作为函数，函数传递的参数为对应组件的实例 ：
render: function() {
return (
<TextInput
ref={function(input) {
if (input != null) {
input.focus();
}
}} />
);
},
React 官方更推荐 function,string 类型会在将来废除。
区分 DOM node 和 React node
需要注意的是，因组件不同 ref 获取到的引用也不同，主要有两种类型
自定义组件：ref 引用的是 React 组件实例；
原生组件： 如 div、input ，ref 引用的是 DOM node；
如果是自定义组件，为了获取组件的 DOM 可以使用 ReactDOM.findDOMNode 方法：
const $dom = ReactDOM.findDOMNode(ref);
利用 ref 实现父组件到子组件的通信
对于自定义组件的情况，ref 可以获取子组件的实例，也就可以访问子组件的实例方法。 虽然这种通信方式有违应用的 reactive 设计，但在实现第三方组件的时候，可以用过这种方式实现一些 trick 的通信。
eg:
const Child = React.createClass({
render() {
return <div> ...</div>
},foo() {
console.log('call child foo');
}
})
const Parent = React.createClass({
render() {
return (<div>
<Child ref={child => {child.foo();}} />
</div>)
}
})
children
children top api
我们已经知道了可以通过 children 访问传递给组件的子组件，分两种情况：
多个子组件：children 为一个数组
单个子组件：children 为单个组件
为了更方便的操作 children， React 提供了一些工具函数
React.children.map(); React.children.forEach(); React.children.count(); // 返回唯一的一个 chid,否则会报错 React.children.only(); React.children.toArray();
Q：为什么不用 Array.prototype.map,children 不是数组吗？
A：children 只有一个 child 的情况，作为一个组件实例，并非一个数组元素，除此之外还有一种叫 keyed fragment 的 children 类型，应当把 children 视为 不透明对象 ，操作它需要通过 children api。
keyed fragment
为了解释 keyed fragment,先引入一个问题：
如果定义了如下的这样一个组件：
const Swapper = React.createClass({
propTypes: {
// `leftChildren` and `rightChildren` can be a string,element,array,etc.
leftChildren: React.PropTypes.node,rightChildren: React.PropTypes.node,swapped: React.PropTypes.bool
},render() {
var children;
if (this.props.swapped) {
children = [this.props.rightChildren,this.props.leftChildren];
} else {
children = [this.props.leftChildren,this.props.rightChildren];
}
return <div>{children}</div>;
}
});
children 如果 rightChildren 和 leftChildren 都为相同类型的数组，当 swapped 变量改变过后，左右会交换，出现的问题是所有的 children 都会 unmount 和 remount，因为对于 组件 set 并没有办法设置 key。
解决办法有两种,第一种是左右 children 封装在两个不同的 wrapper div 中,这样因为每个 child 都有 key,所以不会导致 unmount。
第二种办法是通过 keyed fragment，先来看看 keyed fragment 如果解决这个问题：
const createFragment = require('react-addons-create-fragment');
if (this.props.swapped) {
children = createFragment({
right: this.props.rightChildren,left: this.props.leftChildren
});
} else {
children = createFragment({
left: this.props.leftChildren,right: this.props.rightChildren
});
}
通过这种方式可以为 set 创建 key,createFragment 返回的 children 同样可以通过 React.children API 进行操作。
在未来 React 可能提供如下 API 来替换 createFragment
return (
<div>
<x:frag key="right">{this.props.rightChildren}</x:frag>,<x:frag key="left">{this.props.leftChildren}</x:frag>
</div>
);
clone Element
在某些情况下，可能需要复制 React Element 并生成新的 Element 并附带一些属性，使用方式：
ReactElement cloneElement( ReactElement element,[object props],[children ...] )
对于使用场景上一节的 Decorator Pattern 就是最好的例子。
function as children
在上一节的 Presenter Pattern 中已经介绍过，可以将传递一个函数作为 children
更多相关讨论可参考
https://discuss.reactjs.org/t...
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
