React的命脉发生|新旧_是什么，能否揭示其核心原理？

本文共计2509个文字，预计阅读时间需要11分钟。

《篇首语：编程笔记》

篇首语：本文由编程笔记#自由互联小编为大家整理，主要介绍了这个知识点，是React的命脉相关的知识，希望对你有一定的参考价值。创建

篇首语：本文由编程笔记#自由互联小编为大家整理，主要介绍了这个知识点，是 React 的命脉相关的知识，希望对你有一定的参考价值。

创建组件时我们可以通过 props 接收外部传入的数据该数据可以称之为组件外部数据。除此之外React还有一个命脉知识点 -> 组件内部数据state.

使用函数创建组件时内部数据 state 通过 useState 定义。

function Coutner()   // 利用数组结构得到两个变量  // count表示定义的数据  // setCount修改该数据的方法  // useState从闭包数据中取出 count 的值0 仅表示默认值  const [count, setCount]  useState(0)    return (    count  )

由于目前函数组件足以支撑所有场景的实现因此写法更为复杂的 class 组件相关知识本系列将不会涉及有兴趣的同学可以阅读官网了解。现在主流的项目也基本全面采用函数式组件相关解决方案。只有部分落后的项目团队依然在坚持 class 组件。React 提供了方便平滑的升级模式还在维护老项目的同学可以跟着本系列学习函数组件并逐步重构项目

state 属于被监控的数据它是 React 实现数据驱动 UI 的核心。当 state 值发生变化时组件会尝试重新渲染因此函数会重新执行一次。函数重新执行后此时 count 的数据已经是变化后的结果因此渲染到 UI 的结果也会发生变化。