前端面试宝典

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>React 16.14.0 AJAX 示例</title>
  </head>
  <body>
    <div id="container"></div>

    <!-- React 16.14.0 核心库 -->
    <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
    <!-- ReactDOM 16.14.0 -->
    <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
    <!-- Babel转换器 -->
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.23.2/babel.min.js"></script>
    <script src="../js/jquery3.1.0.min.js"></script>

    <script type="text/babel">
      // React 16 中推荐使用 class 组件替代 createClass
      class List extends React.Component {
        // 构造函数初始化状态，替代 getInitialState
        constructor(props) {
          super(props);
          this.state = {
            arr: [],
          };
        }

        // 组件挂载后执行 AJAX 请求
        componentDidMount() {
          console.log("组件已挂载");
          $.ajax({
            url: this.props.url,
            dataType: "jsonp",
            type: "GET",
            jsonp: "cb", // JSONP 回调函数名的参数 key
            success: (data) => {
              // 使用箭头函数绑定 this，替代 bind
              this.setState({
                arr: data.s || [], // 增加容错处理，避免数据异常
              });
            },
            error: (err) => {
              // 增加错误处理
              console.error("请求失败:", err);
            },
          });
        }

        // 渲染列表
        render() {
          const { arr } = this.state; // 解构赋值，简化代码
          return (
            <ul>
              {arr.map(
                (
                  item,
                  index // 增加 key 属性，优化列表渲染
                ) => (
                  <li key={index}>{item}</li>
                )
              )}
            </ul>
          );
        }
      }

      // 渲染组件到 DOM
      ReactDOM.render(
        <List url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=大宝剑" />,
        document.getElementById("container")
      );
    </script>
  </body>
</html>