👨‍🎓React小白自学指南---基础篇，第3篇《组件的数据挂载方式》

多动症男孩
490 阅读5分钟

前言

React已经成为现代Web开发的热门前端框架之一，越来越多的开发者加入React社区的队伍。但是对于初学者来说，学习一个新的技术框架可能会感到有些困难，特别是如果在没有指导和明确的学习计划的情况下自学。本系列技术博客将为初学者们提供一份指南，通过一系列教程逐步深入地探索React，从最基础的概念讲解到框架的进阶应用，后续还会通过实际项目来加强巩固学习的成果，如果你想学习React，这个系列将无疑是一个很好的起点，让我们开始吧！！！！

如果想和更多的小伙伴交流讨论也可以在联系我，我们有一个专门的完全免费的交流群！！！

1️⃣ 状态（state）

在React中，State是组件内部用于存储和管理组件数据的一种机制。它允许组件在特定事件或条件下更新自身的数据，并在需要时重新渲染视图。State是可变的，它可以通过调用setState()方法来进行更新，所以有了state我们就可以更改组件中的数据，这也是项目中最常用到的属性之一。

(1) 定义state

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({count: this.state.count + 1})}>
          Click me
        </button>
      </div>
    );
  }
}

export default MyComponent;

😋小白提示：

  • 在上面的代码中，我们声明了一个名为count的state变量，它的初始值为0。在组件的render方法中，我们通过this.state.count来访问当前的count值，并在按钮的点击事件中通过setState方法来更新count的值。每次更新count的值都会触发组件的重新渲染，从而使UI能够及时反映count的变化。

(2) setState

setState 有两个参数，第一个参数可以是对象，也可以是方法return一个对象，我们把这个参数叫做 updater。

  • 参数是对象

    this.setState({
isLiked: !this.state.isLiked
})

😋小白提示：

  • this.setState({isLiked: !this.state.isLiked}) 这种方式非常常用，尤其是在需要更新布尔类型的状态时，这种方式不仅代码简单，而且易于理解，可以让我们更快地实现状态的切换。

  • 参数是方法

    this.setState((prevstate, props) => {
  return {
    isLinked: !prevstate.isLiked
  }
})

😋小白提示：

  • 注意的是这个方法接收两个参数，第一个是上一次的state, props，setState 是异步的，所以想要获取到最新的state，没有办法获取，就有了第二个参数，这是一个可选的回调函数。

2️⃣ 属性（props）

在React中，props是组件之间传递数据的一种机制。props是从父组件向子组件传递数据的方式，它是一个包含所有属性和方法的对象。

示例

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

export default App;

😋小白提示：

  • 在上面的例子中，我们定义了一个名为Greeting的函数组件，它接受一个props 参数，其中包含了一个名为name的属性。在组件的返回值中，我们使用props.name来引用name属性的值。在另一个组件App中，我们将name属性设置为"John"，并将组件作为子组件渲染到页面上。这样，就实现了从父组件向子组件传递数据的功能。

3️⃣ 状态和属性的对比

(1) 相同点：

  • state 和 props都用于存储和管理组件的数据，是React中用于管理组件数据的重要机制。

  • state 和 props都可以触发组件的重新渲染，当它们的值发生变化时，React会自动重新渲染组件，更新UI。

  • state 和 props都需要遵循React的单向数据流原则，即数据只能从父组件向子组件传递，不能反向传递。

(2) 不同点：

  • state 是组件内部的状态，只能在组件内部使用，而props是由父组件传递给子组件的数据。

  • state 是可变的，可以通过setState()方法来更新它的值，而props是只读的，子组件不能直接修改 prop s中的值。

  • state 的变化只会影响到当前组件本身，而 props 的变化会影响到当前组件以及它的子组件。

4️⃣ 渲染数据

条件喧染

{
condition ? 'one' : 'two'
}

😋小白提示：

  • 上述代码中当 condition 为 true时，会渲染数据 one, 为 false 时会渲染成 two.

列表渲染

import React from 'react';

function MyComponent(props) {
  const data = props.data;
  const listItems = data.map(item => <li key={item.id}>{item.text}</li>);
  return (
    <div>
      <ul>{listItems}</ul>
    </div>
  );
}

export default MyComponent;

😋小白提示：

  • 在上面的例子中，我们定义了一个名为MyComponent的函数组件，它接受一个props参数，其中包含了一个名为data的属性。在组件中，我们首先使用map方法遍历data数组，将数组中的每个元素都渲染为一个li元素，并使用key属性来标识每个元素。然后，我们将渲染结果存储在listItems变量中，并将listItems变量渲染为一个ul元素。这样，就可以实现一个简单的列表渲染了。

  • 需要注意的是，在使用map方法渲染列表时，我们需要为每个元素指定一个唯一的key属性，以便React能够更好地追踪元素的变化和更新。在上面的例子中，我们使用了每个元素的id值来作为key属性的值。

最后

以上就是 “👨‍🎓React小白自学指南---基础篇，第3篇《组件的数据挂载方式》” 的全部内容，通过本文的学习，我们已将了解了组件的数据挂载的几种方式，也为我们接下来的实战项目提供了关键知识点，最后我想说我会坚持持续更新下去，也希望大家可以给我 ”点赞、关注、评论“ ，这也是我持续下去的动力，我是多动症男孩（ddboy），因为自己淋过雨，所以想给你们撑把伞的未来前端技术专家！！！

avatar
文章
阅读
粉丝