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 结合起来写
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>
);
}
https://i-blog.csdnimg.cn/direct/8ee1160a11f249cbbbbdf34f0acb4ebc.png
{}支持 js 表达式，包括函数调用，变量引用，三目运算，逻辑运算等
不包括语句，如 if、for,while 等
[*]ReactDOM.createRoot(document.getElementById("root")).render(<App />)不能把 body,html 作为根节点渲染，须要我们自己创建 div 作为根节点
[*]组件名必须大写，否则会报错
[*]一个组件中只能有一个根节点，如果有多个根节点，须要使用 fragment 包裹，或者使用 div 包裹，<></>也是 fragment 的语法糖
在jsx中写入不同的数据的展示
https://i-blog.csdnimg.cn/direct/f1302a4fed3e428192def88f1867f1f5.png
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>{}</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>
);
}
https://i-blog.csdnimg.cn/direct/a9c0359a648745509fadb3d3f2398afb.png
https://i-blog.csdnimg.cn/direct/6dd2c7d780e340db823136b12c7ef733.png
https://i-blog.csdnimg.cn/direct/3cf40ac6aaa347408d704da2c56d55e0.png
https://i-blog.csdnimg.cn/direct/0928777a33eb465b9720abf5d9675005.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]