Refs
Refs可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。
import React from 'react'
class RefsDemo extends React.Component {
constructor(props) {
super(props);
this.state = { a: '', b: '', c: '' };
}
handleUp = (event) => {
console.log(this.refs);
console.log(this.refs.a.name);
console.log(this.refs.b.name);
console.log(this.refs.c.name);
this.setState({
a: 'a',
b: 'b',
c: 'c'
})
}
render() {
return (
<div>
<input type="text" name="fisrt" value={this.state.a} ref="a"></input>
<input type="text" name="second" value={this.state.b} ref="b"></input>
<input type="text" name="third" value={this.state.c} ref="c"></input>
<input type="button" value="更新值" onClick={this.handleUp}></input>
</div>
);
}
}
export default RefsDemo;运行：
如果有像个元素有相同的属性，他们在执行事件的时候，他们会做相同的操作，修改代码运行可验证
import React from 'react'
class RefsDemo extends React.Component {
constructor(props) {
super(props);
this.state = { a: '', b: '', c: '' };
}
handleUp = (event) => {
console.log(this.refs);
console.log(this.refs.a.name);
console.log(this.refs.b.name);
console.log(this.refs.c.name);
this.setState({
a: 'a',
b: 'b',
c: 'c'
})
}
render() {
return (
<div>
<input type="text" name="fisrt" value={this.state.a} ref="a"></input>
<input type="text" name="second" value={this.state.b} ref="b"></input>
<input type="text" name="third" value={this.state.c} ref="c"></input>
<input type="text" name="third" value={this.state.c} ref="c"></input>
<input type="button" value="更新值" onClick={this.handleUp}></input>
</div>
);
}
}
export default RefsDemo;要点总结
1.react元素都是不可变的。当元素创建后无法改变其内容或者属性。目前更新界面的唯一变法是创建一个新元素，然后传入ReactDom.render()方法。
2.react只会更新必要的部分。react dom首先会比较内容元素内容先后的不同，而在渲染过程中只会更新改变了的部分。
3.jsx可以使用javascript表达式和注释，两者都需要写在花括号中，但是不能使用ifelse语句,可使用三元运算符来代替。(jsx就是javascript)
4.react使用组建的时候,自定义组建必须以大写字母开头,组建类只能包含一个顶层标签，添加属性时，class要写成className，for要写成htmlFor，因为这两个是javascript保留字。
5.挂载和卸载--->定时器被生成和清除
6.react数据单项流动，组建独立
7.react中state和props区别在于state是根据用户交互来改变，props是不可变的。
8.react中props验证器列表（ React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。）
MyComponent.propTypes = {
// 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
// 可以被渲染的对象 numbers, strings, elements 或 array
optionalNode: React.PropTypes.node,
// React 元素
optionalElement: React.PropTypes.element,
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 可以是多个对象类型中的一个
optionalUnion: React.PropTypes.oneOfType([ React.PropTypes.string, React.PropTypes.number, React.PropTypes.instanceOf(Message) ]),
// 指定类型组成的数组
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
// 指定类型的属性构成的对象
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
// 特定 shape 参数的对象
optionalObjectWithShape: React.PropTypes.shape({ color: React.PropTypes.string, fontSize: React.PropTypes.number }),
// 任意类型加上 `isRequired` 来使 prop 不可空。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!'); } } } }9.react事件采用驼峰命名法，事件必须在构造函数中绑定才能在构造函数中通过this去访问相关属性。通常有两种解决方式1.属性初始化语法.2.在回调函数中使用箭头函数（通常不建议使用这种方式绑定，当这个回掉函数作为属性值传入低阶组件，这些组件可能进行额外的重新渲染，当避免这类性能问题）。
10.react事件传入参数，参数放在event前面，回掉函数参数放在event后面，绑定方式回调函数处使用 bind或者箭头函数
运算符&& ---在javascript中 true && expression 总是返回expression, false&&expression总是返回false。
11.阻止组建渲染返回null即可实现，返回null并不会影响该组件生命周期方法的回掉。初始化数据简单的说就是清理残余数据。
13. 如果列表可以进行重新排序，不建议使用索引进行排序，因为这样会导致渲染很慢。
14.key应该保存在组建上，而不是组建中的元素上<=>在map内部调用元素时，切记在每个元素上面加上一个独一无二的key。
15.key在兄弟元素之间应该唯一，并非全局唯一。
16.key会作为给react提示，但不会传递给组建，如果使用和key相同值，将其作为属性传递。
17.jsx中可以出现任何表达式，但是{} 中不能出现var,const,let等这种关键字，表达式之间要用都好隔开。
18.setState是react中事件处理函数中和请求回调函数中触发UI更新的主要方法。
19.replaceState只会宝妞nextState中状态，原state不再nextState中的状态会全部被删除。（replaceProps同理）
20.forceUpdate（强制更新）应当少使用，尽量通过设置状态或者属性并由react触发render()调用。
21.如果组建以及挂载到dom中，findDomNode本地浏览器dom中的元素，如果组建返回null或者false，那么该方法也返回null。
22.isMounted(组建挂载状态)可以使用该方法保证setState和forceUpdate在异步场景下调用不会出错。
23. 当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。