| 新增特性／需要关注的点 | 说明 | 使用场景 or 备注 |
|---|---|---|
| 函数组件 | 与类组件是等效的。类组件是有render方法的，state数据改变就会重新渲染UI。function User(props) {return <h1>Hello, {props.name}</h1>}
|
函数组件是怎么做到数据变化重新渲染UI的？函数组件属于无状态组件 |
| 事件处理函数 | 不想通过bind绑定this，可以在 constructor 中绑定方法、使用箭头函数、继续使用 createReactClass。 |
回调箭头函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染。建议在构造器中绑定或使用 class fields 语法来避免这类性能问题。 |
| 向事件处理程序传递参数 | 使用箭头函数事件e需显式传 |
<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> |
列表key值 |
在列表项目顺序发生变化的情况下不建议使用索引，可能会引起组件状态的问题（原因？？）。key会传递给React而不会传递给你的组件 |
深入解析为什么 key 是必须的深度解析使用索引作为 key 的负面影响 |
React.lazy |
接受一个函数，这个函数必须动态调用import。能缩减bundle.js的体积，并延时加载在初次渲染时未用到的组件 |
lazy组件应在Suspense组件中渲染，在等待lazy组件渲染时做优雅降级。Suspense组件的fallback属性能接受任何在组件加载过程中你想展示的元素。 |
| 异常捕获边界 | 在模块加载失败时，用异常捕获边界来处理，能有更好的用户体验 | |
context |
React.createContext() 使用context可以避免中间元素传递props
|
context主要用于很多不同层级的组件需要访问同样的数据。需谨慎使用，会使组件的复用性变差 |
React.Fragment |
包裹一组子节点，但不返回本身的节点。减少不必要嵌套的组件。简写<> </>，简写形式不支持key或属性。 |
在写组件时，习惯用div将作为最外层将所有的节点包起来，但这样会渲染出一些没必要的节点 |
ref |
该属性可以作为组件的标识，值可以通过 React.createRef()创建，也可以是回调函数，回调函数它的参数是当前的DOM元素，这个回调函数一般干的事情就是存储指向该DOM元素的引用。回调函数会在组件挂载／卸载／ref属性本身发生变化时调用。 |
也可以在实例组件中使用ref，但实例组件的类型只能是class组件。 |
refs转发 |
可以将子组件的DOM节点暴露给父组件。子组件需要用React.forwardRef()来获取传递给它的ref，然后转发到它渲染的DOM节点上 |
可以获取到DOM节点。直接传递值为React.createRef()的ref只能取到实例组件 |
高阶函数HOC
|
是参数为组件，返回值为新组件的函数，不会改变传入的参数。被包装的组件最好透传props
|
HOC是纯函数，没有副作用。可以参考React官方给出的例子：高阶函数；不要在render组件中使用HOC，会有性能问题，也会导致该组件及其所有子组件的状态丢失。这与React diff算法有关 |
| 性能优化 | 1.生产环境使用React 2.明确什么时候需要更新组件时，使用shouldComponentUpdate 3.使用React.PureComponent进行浅比较 |
React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了shouldComponentUpdate
|
| 受控组件 | 需要value属性和onChange回调函数，需要通过state来维护用户的输入 |
在表单有默认值或需要编辑的时候使用。 |
| 非受控组件 | 就像传统的HTML form，用ref来获取用户的输入 |
只需要用户输入，比如创建表单时使用。 |
ReactDOMServer |
提供了两个在node端和浏览器端均可使用的方法：renderToString 、renderToStaticMarkUp；两个只能在node端使用的方法renderToNodeStream、renderToStaticNodeStream
|
后两种方法需要依赖只能在服务端使用的stream package
|
renderToString() |
可以使用此方法在服务端生成 HTML，并在首次请求时将标记下发，以加快页面加载速度，并允许搜索引擎爬取你的页面以达到 SEO优化的目的。 |
renderToStaticMarkup与 renderToString相似，但前者不会在 React 内部创建的额外DOM 属性，例如 data-reactroot。如果你希望把 React 当作静态页面生成器来使用，此方法会非常有用，因为去除额外的属性可以节省一些字节。 |
dangerouslySetInnerHTML |
是 React 为浏览器 DOM 提供 innerHTML 的替换方案 |
|
Hook |
在不用编写class组件的情况下使用state和React的一些其他特性 |
只能在函数组件中使用。常用的Hooks有useState、UseEffect
|
如何实现一个纯函数？？
1.通过自定义Hook实现组件之间重用状态逻辑。自定义Hook更像是一种约定而不是功能。
还可以通过高阶组件和
render props来实现组件之间重用状态逻辑
// 自定义Hook
import React, { useState, useEffect } from 'react';
function useFriendStatus(id){
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(id, handleStatusChange);
}
})
return isOnline;
}
// 函数组件使用自定义``Hook``
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
2.使用Hook实现倒计时
function CountDown() {
const [count, setCount] = useState(100);
useEffect(() => {
let timer;
if(count > 0) {
timer = setInterval(() => {
setCount(count - 1)
}, 1000);
}
return () => {
clearInterval(timer);
}
}, [count])
return (<div>
{count}
</div>)
}
3.用useState初始化一个数据结构复杂的state，在更新该数据中某个属性时，需要整体更新吗？当state是对象时从，采用合并更新来更新state对象，以防旧的属性丢失：
function UpdateState() {
const [ info, setInfo ] = useState({ name: '', age: 0 });
updateInfo(e) {
setInfo({
...info,
[e.target.name]: e.target.value,
})
}
....
}
4.生命周期方法如何对应到Hook
先回顾下最新的生命周期函数
image.png
| 生命周期函数 | Hook |
|---|---|
constructor |
函数组件不需要构造函数。通过useState来初始化state。 |
getDerivedStateFromProps |
在渲染时安排一次更新。可以将上一轮的prop存入state以便比较 |
shouldComponentUpdate |
用React.memo包裹一个组件来对它的props进行浅比较，函数返回true就会跳过更新 |
render |
就是函数组件本身 |
componentDidMount、componentDidUpdate、componentWillMount
|
利用useEffect Hook可以做到 |
componentDidCatch、componentDerviedFormError
|
暂无这些方法的Hook等价写法 |
网友评论