HoRain云--React 组件状态(State)

HoRain云小助手个人主页 个人专栏: 《Linux 系列教程》《c语言教程》⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。专栏介绍专栏名称专栏介绍《C语言》本专栏主要撰写C干货内容和编程技巧让大家从底层了解C把更多的知识由抽象到简单通俗易懂。《网络协议》本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘一起解密网络协议在运行中协议的基本运行机制《docker容器精解篇》全面深入解析 docker 容器从基础到进阶涵盖原理、操作、实践案例助您精通 docker。《linux系列》本专栏主要撰写Linux干货内容从基础到进阶知识由抽象到简单通俗易懂帮你从新手小白到扫地僧。《python 系列》本专栏着重撰写Python相关的干货内容与编程技巧助力大家从底层去认识Python将更多复杂的知识由抽象转化为简单易懂的内容。《试题库》本专栏主要是发布一些考试和练习题库涵盖软考、HCIE、HRCE、CCNA等目录⛳️ 推荐专栏介绍类组件中的状态管理Counter.js 文件实例函数组件中的状态管理使用 HookCounter.js 文件实例实例React 实例将生命周期方法添加到类中React 实例数据自顶向下流动React 实例React 实例组件可以拥有状态state它是组件数据的私有部分可以用来管理动态数据。状态仅适用于类组件或者使用 React 的 Hook 时可以在函数组件中使用。React 把组件看成是一个状态机State Machines。通过与用户的交互实现不同状态然后渲染 UI让用户界面和数据保持一致。React 里只需更新组件的 state然后根据新的 state 重新渲染用户界面不要操作 DOM。以下实例创建一个名称扩展为 React.Component 的 ES6 类在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 this.state类组件应始终使用 props 调用基础构造函数。类组件中的状态管理创建一个有状态的类组件Counter.js 文件import React, { Component } from react;class Counter extends Component {constructor(props) {super(props);this.state { count: 0 };}increment () {this.setState({ count: this.state.count 1 });}render() {return (divpCount: {this.state.count}/pbutton onClick{this.increment}Increment/button/div);}}export default Counter;在 src/index.js 中渲染该组件实例import React from react;import ReactDOM from react-dom;import ./index.css;import Counter from ./Counter;const root ReactDOM.createRoot(document.getElementById(root));// 渲染 Counter 组件root.render(Counter /);函数组件中的状态管理使用 Hook使用 React Hook 可以在函数组件中使用状态。最常用的 Hook 是 useState。创建一个有状态的函数组件Counter.js 文件import React, { useState } from react;function Counter() {const [count, setCount] useState(0);return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increment/button/div);}export default Counter;在 src/index.js 中渲染该组件实例import React from react;import ReactDOM from react-dom;import ./index.css;import Counter from ./Counter;const root ReactDOM.createRoot(document.getElementById(root));// 渲染 Counter 组件root.render(Counter /);实例创建一个时间点实例来理解组件状态React 实例class Clock extends React.Component { constructor(props) { super(props); this.state {date: new Date()}; } render() { return ( div h1Hello, world!/h1 h2现在是 {this.state.date.toLocaleTimeString()}./h2 /div ); } } const root ReactDOM.createRoot(document.getElementById(root)); root.render( Clock / );尝试一下 »接下来我们将使Clock设置自己的计时器并每秒更新一次。将生命周期方法添加到类中在具有许多组件的应用程序中在销毁时释放组件所占用的资源非常重要。每当 Clock 组件第一次加载到 DOM 中的时候我们都想生成定时器这在 React 中被称为挂载。同样每当 Clock 生成的这个 DOM 被移除的时候我们也会想要清除定时器这在 React 中被称为卸载。我们可以在组件类上声明特殊的方法当组件挂载或卸载时来运行一些代码React 实例class Clock extends React.Component { constructor(props) { super(props); this.state {date: new Date()}; } componentDidMount() { this.timerID setInterval( () this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( div h1Hello, world!/h1 h2现在是 {this.state.date.toLocaleTimeString()}./h2 /div ); } } const root ReactDOM.createRoot(document.getElementById(root)); root.render( Clock / );尝试一下 »实例解析componentDidMount() 与 componentWillUnmount() 方法被称作生命周期钩子。在组件输出到 DOM 后会执行 componentDidMount() 钩子我们就可以在这个钩子上设置一个定时器。this.timerID 为定时器的 ID我们可以在 componentWillUnmount() 钩子中卸载定时器。代码执行顺序当Clock /被传递给ReactDOM.render()时React 调用Clock组件的构造函数。 由于Clock需要显示当前时间所以使用包含当前时间的对象来初始化this.state。 我们稍后会更新此状态。React 然后调用Clock组件的render()方法。这是 React 了解屏幕上应该显示什么内容然后 React 更新 DOM 以匹配Clock的渲染输出。当Clock的输出插入到 DOM 中时React 调用componentDidMount()生命周期钩子。 在其中Clock组件要求浏览器设置一个定时器每秒钟调用一次tick()。浏览器每秒钟调用tick()方法。 在其中Clock组件通过使用包含当前时间的对象调用setState()来调度UI更新。 通过调用setState()React 知道状态已经改变并再次调用render()方法来确定屏幕上应当显示什么。 这一次render()方法中的this.state.date将不同所以渲染输出将包含更新的时间并相应地更新 DOM。一旦Clock组件被从 DOM 中移除React 会调用componentWillUnmount()这个钩子函数定时器也就会被清除。数据自顶向下流动父组件或子组件都不能知道某个组件是有状态还是无状态并且它们不应该关心某组件是被定义为一个函数还是一个类。这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外其它组件不可访问。以下实例中 FormattedDate 组件将在其属性中接收到 date 值并且不知道它是来自 Clock 状态、还是来自 Clock 的属性、亦或手工输入React 实例function FormattedDate(props) { return h2现在是 {props.date.toLocaleTimeString()}./h2; } class Clock extends React.Component { constructor(props) { super(props); this.state {date: new Date()}; } componentDidMount() { this.timerID setInterval( () this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( div h1Hello, world!/h1 FormattedDate date{this.state.date} / /div ); } } const root ReactDOM.createRoot(document.getElementById(root)); root.render( Clock / );这通常被称为自顶向下或单向数据流。 任何状态始终由某些特定组件所有并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。如果你想象一个组件树作为属性的瀑布每个组件的状态就像一个额外的水源它连接在一个任意点但也流下来。为了表明所有组件都是真正隔离的我们可以创建一个 App 组件它渲染三个ClockReact 实例function FormattedDate(props) { return h2现在是 {props.date.toLocaleTimeString()}./h2; } class Clock extends React.Component { constructor(props) { super(props); this.state {date: new Date()}; } componentDidMount() { this.timerID setInterval( () this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return ( div h1Hello, world!/h1 FormattedDate date{this.state.date} / /div ); } } function App() { return ( div Clock / Clock / Clock / /div ); } const root ReactDOM.createRoot(document.getElementById(root)); root.render(App /);❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧