后端开发技术文章列表

详细介绍react组件_生命周期

后端
react, javascript
10850 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件的生命周期是指组件从创建、更新到销毁的整个过程。在这个过程中，React提供了多个生命周期函数，可以帮助我们更好地管理和控制组件的行为。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，组件的生命周期大致可以分为三个阶段：挂载阶段、更新阶段和销毁阶段。<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>挂载阶段：当组件被创建并添加到DOM中时，会依次执行以下生命周期函数：</li></ol><ul style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>constructor：在类组件中，这是构造函数，用于初始化组件的状态和绑定事件处理函数。通常用于初始化state和绑定事件处理函数。</li><li>componentDidMount：组件完成挂载后被调用，此时组件已经显示在页面上。这个方法通常用于执行一些只需要在组件挂载时执行一次的操作，如获取数据、订阅事件等。</li></ul><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>更新阶段：当组件的state或props发生变化时，React会重新渲染组件并执行以下生命周期函数：</li></ol><ul style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>getDerivedStateFromProps：在调用render方法之前被调用，用于根据传入的props派生出新的state。</li><li>render：组件的render方法根据state和props生成虚拟DOM。</li><li>componentDidUpdate：组件更新完成后被调用，此时组件已经更新并重新渲染完成。这个方法通常用于执行一些只需要在组件更新时执行一次的操作，如重新获取数据、重新订阅事件等。</li></ul><ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>销毁阶段：当组件被销毁时，React会调用以下生命周期函数：</li></ol><ul style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>componentWillUnmount：组件即将被销毁时被调用，用于执行一些需要在组件销毁前完成的操作，如取消订阅事件、清理资源等。</li></ul><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">除了上述标准的生命周期函数之外，React还提供了其他一些生命周期方法，如getSnapshotBeforeUpdate和componentDidMount等。这些方法可以帮助我们更详细地控制组件的行为和性能。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">通过合理利用React提供的生命周期函数，我们可以更好地管理组件的状态和行为，提高应用程序的性能和可维护性。

详细介绍react组件_收集表单数据

后端
react, javascript
10844 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，可以通过使用受控组件和非受控组件来收集表单数据。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">对于受控组件，可以通过将表单的输入元素与组件的state进行绑定，然后使用onChange事件处理函数来更新state。当用户在输入框中输入文本时，onChange事件处理函数会被触发，从而更新state中的值。例如：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">import React, { Component } from 'react';</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">class Form extends Component {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">constructor(props) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">super(props);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">this.state = {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">username: '',</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">password: ''  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">};</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">handleSubmit = (event) => {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">event.preventDefault();</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">const username = this.state.username;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">const password = this.state.password;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log('Username:', username);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">console.log('Password:', password);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">handleChange = (event) => {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">const { name, value } = event;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">this.setState({ [name]: value });</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"> </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">render() {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return (</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><form onSubmit={this.handleSubmit}>  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><input type="text" name="username" value={this.state.username} onChange={this.handleChange} />  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><input type="password" name="password" value={this.state.password} onChange={this.handleChange} />  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><button type="submit">Submit</button>  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"></form>  </td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">);</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在上面的例子中，我们将表单的输入元素与组件的state中的username和password进行了绑定。当用户在输入框中输入文本时，handleChange函数会被触发，从而更新state中的值。在handleSubmit函数中，我们可以通过this.state来获取表单中的数据。

详细介绍react组件组合使用_总结

后端
react, javascript
21323 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件组合使用可以带来很多优势，包括提高代码复用性、易于维护和测试、更好的性能等。下面是对React组件组合使用的一些总结：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>组合优于继承：在React中，组件之间可以通过组合的方式来实现复杂的交互和UI界面。相比于基于继承的扩展方式，组合更加灵活、可维护，并且可以提高代码的可重用性。</li><li>父子组件通信：在组合使用组件时，需要确保父子组件之间的通信畅通。可以使用props来传递数据和事件处理函数，或者使用React提供的context来共享数据。</li><li>组件封装和解耦：通过封装组件可以将复杂的逻辑和UI分离，提高代码的可读性和可维护性。同时，解耦可以降低组件之间的依赖关系，使其更加独立和可重用。</li><li>组件生命周期：React提供了生命周期函数来控制组件的生命周期。可以使用这些函数来执行一些特定的操作，如数据获取、状态更新等。</li><li>组件测试和调试：组合使用组件时，需要确保每个组件的功能正常，并且组合后的整体功能也正常。可以使用React提供的测试工具和方法来进行单元测试、集成测试和功能测试。</li><li>性能优化：通过优化组件的性能，可以提高整个应用程序的性能。可以使用React提供的优化方法，如避免不必要的重新渲染、使用虚拟滚动等。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件组合使用可以提高代码的可维护性、可重用性和性能，同时也可以降低开发和维护的成本。在实际开发中，需要根据具体的场景和需求来选择合适的组合方式，并注意优化组件的性能。

详细介绍react组件组合使用_初始化显示

后端
react, javascript
11707 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件组合使用可以通过以下步骤进行初始化显示：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>创建组件：首先需要创建要使用的组件，可以使用函数组件或类组件的方式。</li><li>渲染组件：在父组件中，使用React提供的createElement函数将组件渲染到虚拟DOM中。</li><li>传递props：可以通过父组件传递props给子组件，从而控制子组件的显示和行为。</li><li>渲染虚拟DOM：React会根据虚拟DOM和实际DOM的差异进行最小化的DOM操作，从而更新页面显示。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在初始化显示时，需要注意以下几点：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>组件的初始状态设置：在组件的构造函数中，需要设置初始的state状态，从而控制组件的显示和行为。</li><li>props的传递：可以通过父组件传递props给子组件，从而控制子组件的显示和行为。在子组件中，可以通过this.props来获取传递的props。</li><li>虚拟DOM的渲染：React会根据虚拟DOM和实际DOM的差异进行最小化的DOM操作，从而更新页面显示。在组件更新时，需要使用React提供的setState方法来更新state，并重新渲染虚拟DOM。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件组合使用可以提高代码的可维护性和可重用性，同时也可以降低开发和维护的成本。在初始化显示时，需要注意组件的初始状态设置、props的传递和虚拟DOM的渲染。

详细介绍react组件三大属性(3)_refs和事件处理

后端
react, javascript
10798 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件的三大属性包括props、state和refs。其中，refs是React组件的一个特殊属性，它允许我们访问DOM元素或React元素（虚拟的DOM元素）。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Refs有两种定义形式：一种是通过React.createRef()来创建，另一种是通过React.forwardRef()来创建。通过React.createRef()创建的refs可以用来访问DOM元素或React元素（虚拟的DOM元素），而通过React.forwardRef()创建的refs则可以用来访问React元素（虚拟的DOM元素）和组件实例。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在事件处理方面，React组件的事件处理函数是通过props传递给子组件的。当事件发生时，子组件会调用相应的事件处理函数，并传递事件对象作为参数。在父组件中，可以通过调用子组件传递的事件处理函数来处理事件。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">同时，refs也可以用来传递事件处理函数。通过将事件处理函数绑定到refs上，可以实现在子组件中触发事件时，父组件能够接收到事件并进行处理。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">refs和事件处理是React组件中非常重要的两个属性。通过refs可以访问DOM元素或React元素（虚拟的DOM元素），并通过事件处理函数来处理事件。同时，refs也可以用来传递事件处理函数，使得父组件和子组件之间的交互更加灵活和方便。

详细介绍react组件三大属性之_props

后端
react, javascript
10803 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件的props（属性）是一种重要的属性，它用于从组件外部传递数据给组件内部。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">每个组件对象都会有props属性，组件标签的所有属性都保存在props中。这些属性可以是任何有效的JavaScript数据类型，包括字符串、数字、布尔值、对象、数组等。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在父组件中，可以通过传递属性给子组件来传递数据。子组件可以通过this.props来访问这些属性值。注意，在React中，子组件不能修改props的值，只能通过事件处理函数来向父组件传递数据。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">props还可以用来传递事件处理函数。当子组件需要触发事件时，可以通过调用父组件传递的事件处理函数来实现。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">另外，React还提供了对props的校验功能。通过在组件类中使用static propTypes = {...}来定义props的类型和必要性，可以在开发阶段发现和警告不正确的props使用。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">props是React组件中非常重要的属性之一，它用于从外部传递数据给组件内部，并且还可以用来传递事件处理函数。在使用props时，需要注意不能修改其值，只能通过事件处理函数来向父组件传递数据。同时，使用static propTypes = {...}可以校验props的类型和必要性，提高代码的可维护性和可读性。

详细介绍react组件三大属性之state

后端
react, javascript
10795 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件的state是React组件内部的数据源，用于描述组件的状态。当组件的状态发生变化时，React会自动重新渲染组件，并将新的状态传递给组件的render方法，从而更新组件的UI。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">每个React组件都具有一个私有的state属性，这个属性只能在组件内部使用，而不能直接修改。通过调用this.setState方法来更新state，setState接收一个对象，其中包含要更新的属性及其新值。React会自动合并这些变化，并只重新渲染需要更新的部分。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在state中，可以存储简单的数据类型和复杂的对象、数组等数据结构。这使得开发者能够更灵活地控制组件的状态，提高组件的复用性和可维护性。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">需要注意的是，state应该始终视为只读属性。组件只能通过调用setState方法来更新它，而不能直接更改它的值。直接更改state属性的值可能会导致不可预期的结果，因为React可能会在其内部使用异步方式更新状态。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">另外，React中的state属性不仅可以存储简单的数据类型，还可以存储对象和数组等复杂数据类型。这使得开发者能够更灵活地控制组件的状态，提高组件的复用性和可维护性。

详细介绍react组件的基本定义和使用

后端
react, javascript
10809 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件是构建React应用程序的基本单元，可以看作是应用程序中可复用的UI元素。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React官方解释React允许你将标记（HTML或XML）、CSS和JavaScript组合成自定义的“组件”。这些组件通常封装一些UI和数据，以方便复用和维护。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，组件可以是简单的函数或类。函数组件通常更简单、更轻量级，而类组件则提供了更多的功能和灵活性。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">函数组件的定义通常如下：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">function MyComponent(props) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return <h1>Hello, {props.name}</h1>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">类组件则定义如下：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">class MyComponent extends React.Component {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">render() {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return <h1>Hello, {this.props.name}</h1>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">其中，props（属性）是从父组件传递到子组件的值。在函数组件中，可以通过函数参数直接获取；在类组件中，则通过this.props获取。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件还可以包含事件处理函数，用于处理用户输入或触发表格的事件。这些事件处理函数可以通过props传递到子组件中，并在子组件中使用。例如：<pre style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin-top: 14px; margin-bottom: 0px; font-size: 15px; overflow: auto; border-radius: 6px; color: rgb(5, 7, 59);"><code class="language-jsx" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; margin: 0px; font-size: 1em; tab-size: 4;"><table class="hljs hljs-ln"><tbody style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;" class="firstRow"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">function MyButton(props) {</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">return <button onClick={props.handleClick}>{props.label}</button>;</td></tr><tr style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;"><td class="hljs-ln-line hljs-ln-numbers" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px; color: rgb(190, 191, 208); letter-spacing: 0px; max-width: 50px; overflow: hidden; text-align: justify; user-select: none; vertical-align: top; white-space-collapse: collapse;" width="30"> </td><td class="hljs-ln-line hljs-ln-code" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin: 0px; line-height: 24px;">}</td></tr></tbody></table></code></pre><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在这个例子中，MyButton组件包含一个onClick事件处理函数，它会在用户点击按钮时触发。这个处理函数可以由父组件提供，并通过props传递给MyButton组件。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件是构建React应用程序的基本单元，可以封装UI和数据以方便复用和维护。函数组件和类组件是React中两种基本的组件类型。函数组件更简单、轻量级，而类组件则提供了更多的功能和灵活性。组件可以包含事件处理函数，用于处理用户输入或触发表格的事件。

详细介绍react模块与组件的理解

后端
react, javascript
10800 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React模块和组件是React开发中非常重要的概念，它们是构建React应用程序的基础。下面将对React模块和组件进行详细介绍。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React模块<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React模块是一种向外提供特定功能的JavaScript程序，通常是一个单独的JavaScript文件。随着业务逻辑的增加，代码越来越复杂，通过将代码拆分成多个模块，可以更好地组织代码，提高代码的可重用性和可维护性。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">在React中，每个模块都以JSX的形式呈现，并向外提供特定的功能。通过使用import语句，可以将多个模块导入到当前的JavaScript文件中，然后使用它们提供的功能。这种方式可以有效地减少代码的重复，提高代码的复用性。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React组件是构建React应用程序的基本单元，可以看作是应用程序中可复用的UI元素。组件可以将UI和数据封装在一起，以便在其他地方复用。一个组件可以包含多个HTML元素、CSS样式、JavaScript代码等，用于构建复杂的UI界面。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">组件可以分为函数组件和类组件两种类型。函数组件通常更简单、更轻量级，而类组件则提供了更多的功能和灵活性。无论是函数组件还是类组件，都可以接收属性（props）并使用它们来渲染UI界面。<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">组件化的优点包括：<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>复用：可以将组件应用于其他地方，提高代码的复用性。</li><li>简化编码：可以将复杂的UI界面分解为多个简单的组件，使编码更加简单。</li><li>提高运行效率：通过组件化开发，可以提高应用程序的运行效率。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">React模块和组件是React开发中非常重要的概念。通过将代码拆分成多个模块，可以更好地组织代码，提高代码的可重用性和可维护性。而通过使用组件，可以将UI和数据封装在一起，以便在其他地方复用，提高应用程序的可扩展性和可维护性。

详细介绍详细介绍Flutter中的三级缓存

后端
10849 阅读

<p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 0px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">Flutter中的三级缓存是指局部变量、静态变量和单例。<ol style="box-sizing: border-box; padding: 0px 0px 0px 32px; -webkit-font-smoothing: antialiased; list-style-position: outside; list-style-image: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 1em; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;" class=" list-paddingleft-2"><li>局部变量：在函数中定义的变量，只在该函数内部有效，当函数执行结束后，局部变量就会被销毁。因此，局部变量只适合存储临时数据，例如函数参数、临时计算结果等。</li><li>静态变量：在类中定义的变量，只有一份，被该类的所有实例共享。静态变量在类加载时创建，在类卸载时销毁，因此生命周期与应用程序的生命周期相同。静态变量适合存储应用程序级别的全局变量，例如配置参数、全局状态等。</li><li>单例：在应用程序中只有一个实例的类。单例模式是一种常用的设计模式，可以确保某个类只有一个实例，并提供一个全局访问点。单例模式的实现方式有多种，包括懒汉式、饿汉式、双检锁/双重校验锁（DCL，即 double-checked locking）、初始化解构、内部类解构等。在Flutter中，可以使用单例模式来管理应用程序级别的全局状态，例如配置参数、数据库连接等。</li></ol><p class="" style="box-sizing: border-box; padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans CN", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; margin-top: 14px; margin-bottom: 0px; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); text-wrap: wrap;">需要注意的是，虽然三级缓存可以方便地存储和管理数据，但是过度使用它们可能会导致内存泄漏、数据不一致等问题。因此，在使用三级缓存时需要注意及时释放不再使用的数据，避免内存泄漏；同时需要确保数据的正确性和一致性，避免出现数据不一致的情况。