一、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 中无法使用, 官方将在未来的版本里删除此方法。