React在一年前引入了hooks，对于许多开发人员来说，它们已经改变了我们的编码习惯，但我想谈一谈从React类组件切换到功能组件基本变化。
使用类组件，我们将更新放置在特定的生命周期事件中
❝
类组成中
❞
class Chart extends Component {
componentDidMount() {
//挂载时
}
componentDidUpdate(prevProps) {
if (prevProps.data == props.data) return
// 数据更新时
}
componentWillUnmount() {
// 卸载时
}
render() {
return (
<svg className="Chart" />
)
}
}
在功能组件中，我们改为使用useEffect挂钩在主要生命周期事件期间运行代码。
❝
功能组件中
❞
const Chart = ({ data }) => {
useEffect(() => {
// 挂载时
// 数据更新时
return () => {
}
}, [data])
return (
<svg className="Chart" />
)
}
此时，您可能在想：所以，useEffect() 这只是一种进入生命周期事件的新方法！但是这种理解是错误的!
嗯，让我们看一个具体的例子，看看有什么区别。例如，如果我们有一个计算量大的 getDataWithinRange()函数，该函数基于指定的函数返回经过过滤的数据集，该dateRange怎么办？因为getDataWithinRange()运行需要一些时间，所以我们希望将其存储在组件的state对象中，并且仅在dateRange发生更改时进行更新。
类组成:
对于生命周期事件，我们需要一站式处理所有更改。我们的想法如下所示：
当我们的组件加载时，以及props更改时（其实就是dateRange），就相对的更新data
大致如下：
class Chart extends Component {
state = {
data: null,
}
componentDidMount() {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
}
componentDidUpdate(prevProps) {
if (prevProps.dateRange != this.props.dateRange) {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
}
}
render() {
return (
<svg className="Chart" />
)
}
}
功能组成
在功能组件中，我们需要考虑哪些值保持同步。每次更新的流程更像以下语句：
保持dateRange同步data
大致如下：
const Chart = ({ dateRange }) => {
const [data, setData] = useState()
useEffect(() => {
//假设getDataWithinRange在外部定义了，暂时不考虑这个
const newData = getDataWithinRange(dateRange)
setData(newData)
}, [dateRange])
return (
<svg className="Chart" />
)
}
看到将变量保持同步的方式简单多了是吗？不仅仅是代码量减少了!
类组成
class Chart extends Component {
state = {
data: null,
}
componentDidMount() {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
}
componentDidUpdate(prevProps) {
if (prevProps.dateRange != this.props.dateRange) {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
}
}
render() {
return (
<svg className="Chart" />
)
}
}
功能组成
实际上，最后一个示例仍在类组件中。我们存储data是state为了防止每次组件更新时重新计算它。
但是我们不再需要使用state！而是使用useMemo()，仅data当其依赖项数组更改时才会重新计算。
const Chart = ({ dateRange }) => {
const data = useMemo(() => (
getDataWithinRange(dateRange)
), [dateRange])
return (
<svg className="Chart" />
)
}
❝
注意，我们可以只在函数内部定义变量。
❞
const Chart = ({ dateRange }) => {
const newData = getDataWithinRange(dateRange)
return (
<svg className="Chart" />
)
}
除非我们的getDataWithinRange()函数在计算上消耗很大，否则这就是非常完美。我平时使用useMemo用的非常多，特别是在处理大型数据集时，以保持性能。
考虑使用context
想象一下，我们有许多需要计算的值，但是它们取决于不同的props。例如，我们需要计算：
-
-
的
dimensions图表的时
margins变化
-
类组成
class Chart extends Component {
state = {
data: null,
dimensions: null,
xScale: null,
yScale: null,
}
componentDidMount() {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
this.setState({dimensions: getDimensions()})
this.setState({xScale: getXScale()})
this.setState({yScale: getYScale()})
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.dateRange != this.props.dateRange) {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
}
if (prevProps.margins != this.props.margins) {
this.setState({dimensions: getDimensions()})
}
if (prevState.data != this.state.data) {
this.setState({xScale: getXScale()})
this.setState({yScale: getYScale()})
}
}
render() {
return (
<svg className="Chart" />
)
}
}
功能组成
在我们的功能组件中，我们只需要简单的几句：
const Chart = ({ dateRange, margins }) => {
const data = useMemo(() => (
getDataWithinRange(dateRange)
), [dateRange])
const dimensions = useMemo(getDimensions, [margins])
const xScale = useMemo(getXScale, [data])
const yScale = useMemo(getYScale, [data])
return (
<svg className="Chart" />
)
}
在我们的示例中，我们的类组件为什么会笨拙?
这是因为我们有很多的声明代码来去同步变量props和state，但在功能组件，我们只注重什么保持同步。
平时尽可能使用useMemo()钩子-让我们来实现功能效果。
现在再来一个需求
好的！继续前进-如果我们scales需要根据dimensions图表的图表进行更改怎么办？
类组成
在我们的类组件中，我们需要比较我们prevState和current state
class Chart extends Component {
state = {
data: null,
dimensions: null,
xScale: null,
yScale: null,
}
componentDidMount() {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
this.setState({dimensions: getDimensions()})
this.setState({xScale: getXScale()})
this.setState({yScale: getYScale()})
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.dateRange != this.props.dateRange) {
const newData = getDataWithinRange(this.props.dateRange)
this.setState({data: newData})
}
if (prevProps.margins != this.props.margins) {
this.setState({dimensions: getDimensions()})
}
if (
prevState.data != this.state.data
|| prevState.dimensions != this.state.dimensions
) {
this.setState({xScale: getXScale()})
this.setState({yScale: getYScale()})
}
}
render() {
return (
<svg className="Chart" />
)
}
}
功能组成
const Chart = ({ dateRange, margins }) => {
const data = useMemo(() => (
getDataWithinRange(dateRange)
), [dateRange])
const dimensions = useMemo(getDimensions, [margins])
const xScale = useMemo(getXScale, [data, dimensions])
const yScale = useMemo(getYScale, [data, dimensions])
return (
<svg className="Chart" />
)
}
是不是爽歪歪!
保持代码简洁
较短的代码不一定更易于阅读，但是使我们的组件尽可能地整洁无疑是一个优势！
最后
关注我们添加【前端进阶技术群】，回复：【资料包】领取前端进阶资料包 在看、转发支持作者❤️
