正文

react脚手架和深入理解jsx语法

IP云
IP云V管理员/5 阅读
08/07
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

react的mvc和vue的mvvm

vue的mvvm属于双向绑定，view层，model数据层，vm实现双向绑定的控制层

此种模式，再某一类项目种很有优势：管理系统 ( OA, ERP , CRM , CMS.....) ,因为其中存在着大量表单操作

react的mvc属性单向数据绑定，view层，model层（数据），controller（控制层）

1.两种都是操作数据来影响视图的，告别了传统操作DOM的时代

model层控制view层

  • Vue基于数据劫持，拦截到最新的数据，从而重新渲染视图
  • React是提供对应的API，通过我们操作API，让最新数据渲染视图

2.都一定存在DOM的差异化渲染 （DOM DIFF）

每一次数据更改，只把需要改变的视图部分进行渲染

3.react默认只实现了单向控制（只有数据影响视图），而vue基于v-model实现了双向控制 （其实，在视图影响数据方式上，我们自己也能实现，即react也能实现双向绑定）

题外话：在前后端整个项目的结构上，vue和react也算是只有v层，即视图层，mvc也是整个项目架构的名词（model层 ：创建数据模型，controller：业务层，实现各种业务逻辑，view层，即前端层），这里的react和vue都只能说是前端 *局部 * 的mvc和mvvm

脚手架

官方脚手架：create-react-app

$npm i -g create-react-app
$create-react-app xxx 基于脚手架创建项目
$npm start / build 生成项目
$npm eject 暴露webpack配置项

还有其他热门脚手架DvaJs , UmiJs（阿里）

脚手架默认安装

-react

-react-dom 开发HTML页面程序 （react-native 开发原生App的）

-react-scripts

和Vue一样，React脚手架也默认把配置好的webpack那些东西隐藏到node_modules中了

=> vue是提供了vue.config.js让用户自己去修改配置项 （详情查看vue cli官方文档）

=>想要修改React中的webpack配置项

1.先把配置项暴露出来 yarn eject / npm run eject

2.细节点: 不可逆转（暴露了不能再隐藏回去）+ 如果有git 先要保存修改项

config webpack配置项

​|-webpack.config.js

​|-webpackDevServer.config.js

​|-path.js 存放各配置的地址文件信息（入口文件等）

​|.....

scripts

​|-start.js 开发环境下 npm run start 先执行这个文件

​|-build.js 生产环境下 npm build 先执行这个文件

​|......

1.默认情况下，我们会把所有需要开发引入的资源（样式|图片。。。）和编写的模块等都放到SRC目录中（webpack本身就是打包src目录，更具入口的index.js）

2.但是有些东西我们还是需要写在public下的 index.html中

=>页面导入最后打包的css/js ,由于打包后的文件比较大，第一次请求页面需要一点时间，这个时间段内，我们看到的就是白屏效果

1）为了解决白屏效果，我们会在index.html中设置loading效果（这些内容是一加载页面就展示出来）=>这个有对应插件

2）给资源做304缓存

..........

=>有一些模块不支持CommonJs /ES6Module这种导入导出规范，此时需要我们把这些模块在index.html中单独script导入进来

=>还可以把一些公共资源直接在这里导入 （这样webpack打包的时候就不会把内容打包在一起了）

配置向后兼容

  • browserList
  • Polyfill

JSX基础语法与JSX语法的优点

jsx ：javascript and xml

其实也可以将xml理解为html ，但是这里的html代码并不是直接运行，更像是xml里我们为标签定义意义

jsx的基本使用：1.最外层只能有一个根节点（一般用空标记，因为如果用div，会真实渲染一个没有真正意义只用来包裹的div）2.动态数据绑定用 ： {} ，{}中存放js表达式（js执行代码得有返回的结果）=>{}中可以放数组：把数组中的每一项都呈现，不含逗号=>{}中一般情况不能放对象，=> 但是如果是jsx的虚拟DOM对象，是直接可以渲染的 3.设置行内样式，必须是style = {{ color:'red'}} ，设置样式类名需要使用的是className而不是class4.jsx中进行的判断一般都要基于三元运算符来完成5.jsx中遍历数组中的每一项，动态绑定多个jsx元素，一般都是基于数组中的map来实现（map迭代数组的同时，支持返回值）(和vue一样，循环的对象也要加key值)
=>我们要在ul li中渲染 let arr= [{name:'张三',age:25},{name:'李四',age:26}]
=>就需要这样：<ul>
{arr.map((item,index)=>{
return <li>
姓名:{item.name}
年龄:{item.age}
})}
<ul>

JSX的优点：
1.JSX语法具备很强的编程性，这是vue中模板语法不具备的，所以vue从新版本（v2.xx）开始，支持了jsx语法
=>举例：我们传回一个数据，根据这个数据的不同的，渲染不同的组件，在vue的template语法中，我们要写一堆html代码，每个不同的组件都需要写出来，然后根据if-else来控制display的隐藏于显示来控制具体需要展示哪一个，而在jsx语法中，我们可以使用代码将html结构动态的组建起来，比如'h'+this.i ,这个i就可以控制要使用第几档的标题标签
=>这就是jsx的强编程性和template的弱编程性
2.JSX语法具备过滤效果（过滤非法内容）,有效防止XSS攻击
=>自行了解XSS安全优化

把JSX语法=>虚拟DOM对象=>真实DOM

1.基于babel-preset-react-app把JSX语法变为React.createElement的模式
=>如div标签都会转换成React.createElement("div",null,React.createElement(..))
=>React.createElement的第一个属性为div的标签名，第二个为标签的属性（对象），第三个为子元素
=>每遇到元素标签（或者组件）都要createElementReact.createElement = function (type,props,...children){
let jsxOBJ ={
type:type
props:{}
};
//=>传递了属性，把传递的属性都放置到jsx-OBJ的props中
if(props !==null){
//基于es6实现浅克隆
jsxOBJ.props= {...props}
}
//=>如果传递了子元素，还需要给jsxOBJ的props中设置children属性
if(children.length > 0){
jsxOBJ.props.children = children;
//如果只有一项，则把第一项赋值给jsxOBJ.props.children即可
if(children.length ===1){
jsxOBJ.props.children = children[0]
}
} return jsxOBJ;
};2.基于React.createElement方法的执行，创建出虚拟DOM对象（jsx对象）
=>首先是一个对象
=>type属性存储的是标签名（或者组件）
=>props属性：没有传递任何属性，也没有任何的子元素，则为空对象，把传递给createElement的属性，都赋值给props;如果有子元素，则默认新增一个children的属性，可能是一个值，也可能是一个数组3.基于ReactDOM.render把创建的虚拟DOM对象渲染到页面指定的容器中
=>ReactDOM.render([JSX-OBJ],[container],[callback])
=>参数意义：1.虚拟dom 2.容器 3.回调函数（在这个回调函数中，可以获取到真实的dom，只不过项目中一般不用这个参数） ReactDOM.render = function render (jsxobj ,container,callback){
let {type ,props}= jsxOBJ;
//=>创建dom元素
if(typeof type === "string"){
//创建dom对象(真实dom)
let element = document.createElement(type);
//给dom设置传入的属性
for(let key in props){
if( !props.hasOwnProperty(key)) break;
if(key === 'className'){
element.setAttribute('class',props[key]);
continue;
}
if(key === 'style'){
let styOBJ = props['style']
for(let attr in styOBJ){
if(!styOBJ.hasOwnProperty(attr)) break;
element.style[attr] = styOBJ;
}
}
//关于子元素的处理
if(key === 'children'){
//统一为数组
let children = props['children'];
!Array.isArray(children) ? children = [children] : null ;
//循环子元素
children.forEach(item=>{
//如果是文本，直接创建文本节点赋值给element即可，如果是新的虚拟dom对象则需要重复调用render方法，把新建的dom对象增加给element（递归）
if(typeof item ==== "string"){
element.appendChild(document.createTextNode(item))
return;
}
render(item,element);
});
continue;
}
element.setAttribute(key,props[key]);
}
//增加到指定容器当中
container.appendChild(element);
//触发回调函数
callback && callback()
}; }