一、react基础回顾
1.状态
【组件挂载】：每当组件第一次加载到 DOM 中的时候，这在 React 中被称为挂载。
【组件卸载】：每当组件生成的这个 DOM 被移除的时候，这在 React 中被称为卸载。
2.生命周期
组件的生命周期可分成三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
| 生命周期方法 | 何时调用 |
|---|---|
| componentWillMount | 在渲染前调用,在客户端也在服务端。 |
| componentDidMount | 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 |
| componentWillReceiveProps | 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。 |
| shouldComponentUpdate | 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。 |
| componentWillUpdate | 在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 |
| componentDidUpdate | 在组件完成更新后立即调用。在初始化时不会被调用。 |
| componentWillUnmount | 在组件从 DOM 中移除之前立刻被调用。 |
3.代码执行过程
当 组件 被传递给 ReactDOM.render()时，React 调用 该组件的构造函数。 初始化 this.state ， 稍后会更新此状态。
React 然后调用组件的render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 组件 的渲染输出。
当 组件 的输出插入到 DOM 中时，React 调用componentDidMount()生命周期钩子。 在其中，可执行componentDidMount()中的方法。
调用setState()来调度UI更新。 通过调用setState()，React 知道状态已经改变，并再次调用render()方法来确定屏幕上应当显示什么。 这一次，render()方法中的 this.state.变量 将不同，所以渲染输出将包含更新的数据，并相应地更新 DOM。
一旦组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数。
4.Props 验证
Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。
//MyTitle是之前定义的组件
MyTitle.propTypes = {
title: PropTypes.string //这里给title属性加上属性值类型为String
};
5.Keys
Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。
通常，我们使用来自数据的 id 作为元素的 key；当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key。
当我们生成两个不同的数组时，我们可以使用相同的键。
<li key={todo.id}>
{todo.text}
</li>
6.API
| API | 语法 | 说明 | 注意 |
|---|---|---|---|
| 设置状态setState | setState(object nextState[, function callback]) | nextState，将要设置的新状态，该状态会和当前的state合并。callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。 | （1） 不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换。（2） setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。（3） setState()总是会触发一次组件重绘，除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。 |
| 替换状态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设置成功，且组件重新渲染后调用。 | （1） 设置组件属性，并重新渲染组件。（2） props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。（3） 更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。 |
| 替换属性replaceProps | replaceProps(object nextProps[, function callback]) | nextProps，将要设置的新属性，该属性会替换当前的props。callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。 | replaceProps()方法与setProps类似，但它会删除原有 props。 |
| 强制更新forceUpdate | forceUpdate([function callback]) | callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。 | （1） forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。（2） forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法通知React需要调用render()。（3） 一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。 |
| 获取DOM节点findDOMNode | DOMElement findDOMNode() | 返回值：DOM元素DOMElement | （1） 如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。（2） 当render返回null 或 false时，this.findDOMNode()也会返回null。（3） 从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。 |
二、工作过程中遇到的基础问题
1.在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。
2.React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
3.JSX 允许在模板中插入数组，数组成员为JSX，数组会自动展开所有成员。
4.在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
5.通常情况下，如果你没有在方法后面添加 () ，例如 onClick={this.handleClick}，你应该为这个方法绑定 this，this.handleClick = this.handleClick.bind(this);。
方法一：通过箭头函数的调用替代bind：onClick={()=>this.handleClick()}。
方法二：函数通过属性初始化器语法替代bind：
handleClick = () => {
console.log('this is:', this);
}
6.如果条件是 true，&& 右侧的元素就会被渲染，如果是 false，React 会忽略并跳过它。
7.下面例子中，Post 组件可以读出 props.id，但是不能读出 props.key。
<Post
key={post.id}
id={post.id}
title={post.title} />
三、熟悉react代码规范
【react规范】
- 对于JSX属性值总是使用双引号("), 其他均使用单引号(’)。
- JSX总是在自动关闭的标签前加一个空格，正常情况下也不需要换行。
- 不要在JSX {} 引用括号里两边加空格。
- Props 属性：如果属性值为 true, 可以直接省略。
<img>标签总是添加 alt 属性. 如果图片以presentation(感觉是以类似PPT方式显示?)方式显示，alt 可为空, 或者<img>要包含role="presentation"。
- 避免使用数组的index来作为属性key的值，推荐使用唯一ID。
- 将多行的JSX标签写在 ()里，单行可以不需要。
- 对于没有子元素的标签来说总是自己关闭标签。
- 如果模块有多行的属性， 关闭标签时新建一行 。
- 使用箭头函数来获取本地变量。
- 不要再使用 isMounted。
为什么? isMounted 反人类设计模式:(), 在 ES6 classes 中无法使用， 官方将在未来的版本里删除此方法。
四、继续学习react框架的方向
719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
