郑州网站建设zzmshl,wordpress 删除版权信息,最新wordpress漏洞,培训网站开发流程react的设计模式
React 是 mvc 体系#xff0c;vue 是 mvvm 体系 mvc: model(数据)-view(视图)-controller(控制器) 我们需要按照专业的语法去构建 app 页面#xff0c;react 使用的是 jsx 语法构建数据层#xff0c;需要动态处理的的数据都要数据层支持控制层: 当我们需要…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 classNameApph1Hello World/h1{oBox}{oBox2(Hello jsx)}p当前的环境是:{process.env.NODE_ENV}/pp当前的环境是:{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 classNameApph1Hello 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 }}/pp当前的环境是:{process.env.NODE_ENV}/pp当前的环境是:{process.env.REACT_APP_API_URL}/p/div);
}
