react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot

react的设计模式

  1. React 是 mvc 体系,vue 是 mvvm 体系
    • mvc: model(数据)-view(视图)-controller(控制器)
      1. 我们需要按照专业的语法去构建 app 页面,react 使用的是 jsx 语法
      2. 构建数据层,需要动态处理的的数据都要数据层支持
      3. 控制层: 当我们需要在视图中进行数据更新时,需要控制层去修改相关数据,然后 react 框架会根据数据的变化去更新视图
        数据驱动视图的渲染 => 单向驱动
        视图中的表单内容改变,想要修改数据,需要开发者自己去写事件监听函数,然后修改数据
    • mvvm: model(数据)-view(视图)-viewModel(视图模型监听层)
      1. 数据驱动视图渲染:监听数据的更新,当数据更新时,视图自动渲染
      2. 视图驱动数据的更新: 监听页面中表单元素的内容改变,自动去修改数据
        双向驱动

jsx 语法

  • jsx: javascript xml,就是把 html 和 javascript 结合起来写
js 复制代码
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 表达式,包括函数调用,变量引用,三目运算,逻辑运算等

不包括语句,如 iffor,while

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

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

js 复制代码
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>
  );
}




相关推荐
遇到困难睡大觉哈哈7 分钟前
CSS中的Element语法
前端·css
Real_man14 分钟前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中14 分钟前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术16 分钟前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作19 分钟前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
LuckyLay2 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu1682 小时前
aksk前端签名实现
java·前端·javascript
烛阴2 小时前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw02 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦2 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js