案例学习

我正在参加「掘金·启航计划」

案例一：电影列表的多种实现方式

创建基本页面结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电影列表</title>
</head>
<body>
  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    // 1. 创建root
    const root = ReactDOM.createRoot(document.querySelector('#root'));

    // 封装App组件
    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          movies: ['星际穿越', '流浪地球', '独行月球', '大话西游', '火星救援']
        }
      }

      render() {
        return (
          <div>
            <h2>电影列表</h2>
          </div>
        )
      }
    }

    // 渲染组件
    root.render(<App />);
  </script>

</body>
</html>

方法一：简单粗暴型

直接把每个电影按照下标展示出来：

class App extends React.Component {
    // ...
    render() {
        const { movies } = this.state;

        return (
          <div>
            <h2>电影列表</h2>
            <ul>
              <li>{movies[0]}</li>
              <li>{movies[1]}</li>
              <li>{movies[2]}</li>
              <li>{movies[3]}</li>
              <li>{movies[4]}</li>
            </ul>
          </div>
        )
      }
    }
}

那么现在，页面中就会出现如下效果：

截屏2023-05-13 16.53.57.png

方法二：for循环（1）

很容易发现，如果当数据量一大，代码量就要非常大了，肯定很容易想到之前学过的Vue框架有v-for来实现列表渲染，那么React中应该也可以用for循环来实现：

render() {
    const { movies } = this.state;
    const list = [];
    for(let i = 0, len = movies.length; i < len; i++) {
      const movie = movies[i];
      const li = <li>{movie}</li>;
      list.push(li);
    }

    return (
      <div>
        <h2>电影列表</h2>
        <ul>{list}</ul>
      </div>
    )
}

现在在页面上，应该也能看到和之前一样的效果。

方法二：for循环（2）

将上面的方法的for循环用map方法来代替，把movies数组的每一项变成一个li元素：

render() {
    const { movies } = this.state;
    const list = movies.map(movie => <li>{movie}</li>);

    return (
      <div>
        <h2>电影列表</h2>
        <ul>{list}</ul>
      </div>
    )
}

案例二：计数器

还是一样的，先搭好基础页面的样子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>

  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    // 1. 创建root
    const root = ReactDOM.createRoot(document.querySelector('#root'));

    // 2.封装App组件
    class App extends React.Component {
      constructor() {
        super();

        this.state = {
          count: 100
        }
      }

      render() {
        const { count } = this.state;

        return (
          <div>
            <h2>计数器案例</h2>
            <p>当前数值：{count}</p>
          </div>
        )
      }
    }

    // 渲染组件
    root.render(<App />);
  </script>
</body>
</html>

效果如下：

截屏2023-05-13 17.15.38.png

然后增加两个按钮+1和-1按钮，然后给按钮绑定事件：

class App extends React.Component {
  constructor() {
    // ...
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }

  increment() {
    const { count } = this.state;
    this.setState({
      count: count + 1
    })
  }

  decrement() {
    const { count } = this.state;
    this.setState({
      count: count - 1
    })
  }

  render() {
    const { count } = this.state;

    return (
      <div>
        // ...
        <button onClick={this.increment}>+1</button>
        <button onClick={this.decrement}>-1</button>
      </div>
    )
  }
}

这样子一个计数器就做好啦，看看效果吧 🎉：

屏幕录制2023-05-13 17.26.11.gif

VSCode 的 React 用户代码片段

我们在前面练习React的过程中，有些代码片段是需要经常写的，我们在VSCode中我们可以生成一个代码片段，方便我们快速生成。VSCode中的代码片段有固定的格式，所以我们一般会借助于一个在线工具来完成。具体的步骤如下:

复制自己需要生成代码片段的代码
在snippet generator网站中生成代码片段
在VSCode中配置代码片段，具体步骤如下： (1) 点击左下角设置按钮 (2) 点击用户代码片段 (3) 选择HTML模板 (4) 粘贴刚才的代码即可完成 (5) 检验一下是否成功我已经把以上步骤录制成一个GIF动图了，可以参考一下：

屏幕录制2023-05-13 17.51.53.gif

希望大家能顺利完成呢 🥳，但是刚开始的时候还是希望能多敲几遍熟悉一下。

写在最后

如果大家喜欢的话可以收藏本专栏，之后会慢慢更新，然后大家觉得不错可以点个赞或收藏一下 🌟。

本节的源码放在作者的GitHub仓库里，分别是：

前端小白学 React 框架（二）