网站被爬，数据泄露，如何应对不断强化的安全危机？

react的设计模式

1. React 是 mvc 体系，vue 是 mvvm 体系
   • mvc: model(数据)-view(视图)-controller(控制器)
   • mvvm: model(数据)-view(视图)-viewModel(视图模型监听层)

jsx 语法

• jsx: javascript xml,就是把 html 和 javascript 结合起来写

function App() {
  useEffect(() => {
    console.log(process.env);
    // 请求接口
    fetch("/api/v1/users")
      .then((res) => res.json())
      .then((res) => console.log(res));
  }, []);

  /**
   * 直接显示的静态组件
   */
  const oBox = <h2>这是一个标题</h2>;
  /**
   * 需要传参的组件
   */
  const oBox2 = function (title) {
    return <h2>这是一个标题,{title}</h2>;
  };
  return (
    <div className="App">
      <h1>Hello World</h1>
      {oBox}
      {oBox2("Hello jsx")}
      <p>当前的环境是:{process.env.NODE_ENV}</p>
      <p>当前的环境是:{process.env.REACT_APP_API_URL}</p>
    </div>
  );
}

{}支持 js 表达式，包括函数调用，变量引用，三目运算，逻辑运算等
不包括语句，如 if、for,while 等

• ReactDOM.createRoot(document.getElementById("root")).render(<App />)不能把 body,html 作为根节点渲染，需要我们自己创建 div 作为根节点
• 组件名必须大写，否则会报错
• 一个组件中只能有一个根节点，如果有多个根节点，需要使用 fragment 包裹，或者使用 div 包裹，<></>也是 fragment 的语法糖

在jsx中写入不同的数据的展示

function App() {
  useEffect(() => {
    console.log(process.env);
    // 请求接口
    fetch("/api/v1/users")
      .then((res) => res.json())
      .then((res) => console.log(res));
  }, []);

  const oBox = <h2>这是一个标题</h2>;
  const oBox2 = function (title) {
    return <h2>这是一个标题,{title}</h2>;
  };
  return (
    <div className="App">
      <h1>Hello World</h1>
      {oBox}
      {oBox2("Hello jsx")}
      {/* 支持字符串 */}
      {"hello react"}
      {/* 支持数组 */}
      <p>{[1, 2, 3, 4, 5]}</p>
      {/* 支持表达式 */}
      {1 + 3}
      {null}
      {undefined}
      {/* 不支持 object*/}
      <p>{{ name: "zs", age: 25 }}</p>
      <p>当前的环境是:{process.env.NODE_ENV}</p>
      <p>当前的环境是:{process.env.REACT_APP_API_URL}</p>
    </div>
  );
}