IT评测·应用市场-qidao123.com技术社区

标题: react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot [打印本页]

---

作者: 郭卫东    时间: 2024-9-13 04:27
标题: react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot
react的设计模式

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

jsx 语法

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

1. function App() {
2.   useEffect(() => {
3.     console.log(process.env);
4.     // 请求接口
5.     fetch("/api/v1/users")
6.       .then((res) => res.json())
7.       .then((res) => console.log(res));
8.   }, []);
10.   /**
11.    * 直接显示的静态组件
12.    */
13.   const oBox = <h2>这是一个标题</h2>;
14.   /**
15.    * 需要传参的组件
16.    */
17.   const oBox2 = function (title) {
18.     return <h2>这是一个标题,{title}</h2>;
19.   };
20.   return (
21.     <div className="App">
22.       <h1>Hello World</h1>
23.       {oBox}
24.       {oBox2("Hello jsx")}
25.       <p>当前的环境是:{process.env.NODE_ENV}</p>
26.       <p>当前的环境是:{process.env.REACT_APP_API_URL}</p>
27.     </div>
28.   );
29. }

复制代码

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

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

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

1. function App() {
2.   useEffect(() => {
3.     console.log(process.env);
4.     // 请求接口
5.     fetch("/api/v1/users")
6.       .then((res) => res.json())
7.       .then((res) => console.log(res));
8.   }, []);
10.   const oBox = <h2>这是一个标题</h2>;
11.   const oBox2 = function (title) {
12.     return <h2>这是一个标题,{title}</h2>;
13.   };
14.   return (
15.     <div className="App">
16.       <h1>Hello World</h1>
17.       {oBox}
18.       {oBox2("Hello jsx")}
19.       {/* 支持字符串 */}
20.       {"hello react"}
21.       {/* 支持数组 */}
22.       <p>{[1, 2, 3, 4, 5]}</p>
23.       {/* 支持表达式 */}
24.       {1 + 3}
25.       {null}
26.       {undefined}
27.       {/* 不支持 object*/}
28.       <p>{{ name: "zs", age: 25 }}</p>
29.       <p>当前的环境是:{process.env.NODE_ENV}</p>
30.       <p>当前的环境是:{process.env.REACT_APP_API_URL}</p>
31.     </div>
32.   );
33. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4