A. react如何根据字符串生成组件
使用React元素处理事件与处理DOM元素上的事件非常相似。不过有一些语法上的差异:
react事件使用驼峰命名法,而不是全部小写命名。
使用JSX你传递一个函数作为事件处理程序,而不是一个字符串。
例如,HTML:
<button onclick="activeLasers()">
Active Lasers
</button>
在React中略有不同:
<button onClick={activateLasers}>
Active Lasers
</button>
另一个区别是,你不能返回false来防止React中的默认行为。 您必须显式调用preventDefault。 例如,使用纯HTML,为了防止打开新页面的默认链接行为,您可以写:
<a href="#" onclick="console.log('The link was clicked'); return false;">
Click me
</a>
在React中,这可以改为:
function ActiveLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked');
}
return (
<a href='#' onClick={handleClick}>
click me
</a>
);
}
B. vue jsx 循环创建组件为什么不显示
vue 调用子组件,传递一个方法,这个方法该怎么传递event
可以用 v-on 指令监听 DOM 事件:
<div id="example">
<button v-on:click="greet">Greet</button>
</div>
绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法:
var vm = new Vue({
el: '#example',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// 方法内 `this` 指向 vm
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
alert(event.target.tagName)
}
}
})
// 也可以在 javaScript 代码中调用方法
vm.greet() // -> 'Hello Vue.js!'
C. react vue选哪一个
个人推荐选择vue
先给你上一个二者对比;
1、Vue上手更简单,特别是从dom和jquery时代过来的程序员,或者习惯模板语言的后端开发,更容易接受Vue。
2、Vue从设计上讲,跟趋向于简化使用,就是说Vue从骨子里面就是想用起来简单,但React更多的是为大型工程考虑。
3、React上手稍微难一点,除了Vue那些基础,你还得学习,纯函数组件,函数式编程,JSX,css-in-js,高阶组件,Rex等。
4、在组件化上,React更纯粹,也可以说更强大一些,而Vue不是完全组件化,应对一些复杂组件,可能会有些麻烦。
5、React的设计,配合TypeScript,更适合大型或者超大型的多人协作项目,管理起来更规范,不容易出错。
6、对于移动端跨平台的支持,React的兄弟项目ReactNative已经占了半壁江山,虽然React和ReactNative可以看成两个东西,但是也有很多关联性。而Vue在移动端开发上,目前来看,有阿里的Weex基于Vue,据说也很强大,但是肯定不如ReactNative那么主流和稳定,具体Vue在移动端的表现如何,需要时间观察。
7、虽然Vue在中国、日本、韩国、法国等地区热度很高,在美国也有一定影响力,但在全世界范围看,React的社区比Vue要更大,资源也更丰富,React的背景Facebook,实力强于个人开发者-尤雨溪(背靠了阿里和一些小赞助公司)。但实力是相对的,实际上,两者实力都很强,不用担心Vue的实力不足或稳定性,Vue足够优秀,3、5年内应该都会是主流,只能说React在全世界范围内的资源更多,影响更大而已。
8、Vue和React本身只是一个基础库,对于稍微复杂一点的项目来说,大多数用户都不会自己搭框架。所以说,选择Vue还是React,要重点比较两者的第三方开发框架、UI框架、组件库及各种资源是否丰富、有活力。
9、就我目前看到的情况而言,Vue体系较热的UI框架有ElementUI、iView/ViewUI、Ant Design Vue、vant、mint-ui、vux等,Vue Admin(后台管理系统)相关资源比较丰富,很多中小公司都在用;React热门UI框架有Material-UI、Ant Design、Element-react等,比较集中。可以这样说,Vue的生态就像是游击队,而React更像是正规军。ElementUI和Ant Design都是阿里系的,如果没有Ant Design的话,感觉Vue在国内要强盛一些,但有了阿里Ant Design强势介入,许多中间派就倒向React了,特别是一些稍微大一点的公司。
10、其他因素:Vue的核心开发团队只有尤雨溪一人(大概90%的代码都是他写的),假如他休假了、生病了,主要开发就暂停了,Vue想要健康的发展,应该要增加1~2个核心开发(每个人都深度参与开发,并可以推动开源生态发展)。
11、其他因素:React从一开始就抱上了TypeScript的大腿,而Vue目前仍以ES为主,不得不说,在很长一段时间内,TS都是优于ES的,而Vue社区要切换TS生态,还有一段路要走。这注定了大公司、大项目选React+TS的概率要大一些。中小公司多少也会受到大公司的影响。
总结:
1、如果只是做项目,两者都很好,都是主流,都能极大的增强前端开发能力,选任何一个都没有错(做选择时,可考虑其他一些因素,比如自身能力、第三方组件)。
2、如果想抱大腿、跳槽大公司,建议选React + TypeScript练手。
3、5年以后的长远考虑?这两个的生命力,足以支撑5年,但你要说5年之后,它们是否还是主流,这个真不好说。现在前端技术发展太快。
4、作为一个专业前端,建议前期学Vue,后期再学React;反之,如果之前直接学的React,则一般不需要再去学Vue了,做项目,选一个就行了。
希望看完我的观点后,能对你有些帮助!
D. vuejs 返回json数据怎么循环渲染到页面
Vue中computed就是实时计算使用。Vue检测到数据发生变动时就会执行对相应数据有引用的函数。
下面是一个demo。引用自己的vue.js就可以看效果。利用computed可以做一些监控之类的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
<title>title</title>
<link href="" rel="stylesheet">
<script src="js/vue.js"></script>
</head>
<body>
E. 为什么浏览器不将类似react.js的虚拟DOM在其内部实现
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。 前几天写的那个拖拽,自己留下的疑问。。。这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分。。。就再聊聊拖拽吧 一、不要直接操作dom元素 react中使用了虚拟dom的概念,目地就是要尽量避免直接操作dom元素,所以我们在对dom元素进行操作的时候需要注意,我之前为了获取form的参数就直接用了var dragBox=document.getElementById('form')去找dom,但是其实记录from的初始位置,可以在其子组件更新父组件参数的时候调用。即在MyFrom组件中获取,如下代码: onChildChanged:function(newState){ /*以下为修改处*/ var computedStyle=document.defaultView.getComputedStyle(ReactDOM.findDOMNode(this.refs.dragBox),null); newState.left=computedStyle.left; newState.top=computedStyle.top; /*以上为修改处*/ this.setState(newState); }, 这样就可以直接在父组件中操作自己,而不是在子组件中调用。 二、onmousemove和onmouseup事件应该绑定到document上 拖拽事件中,当鼠标在DragArea中按下后,就应该检测鼠标在document中移动的距离及何时弹起。否则直接绑定在form的话会有一个不雅的地方,就是拖动条拖动边缘附近的时候,如果鼠标速度快一点会失效,鼠标再回来拖动条会自动吸上鼠标。因此利用react初始化阶段的componentDidMount函数,这个函数是组件被装载后才会被调用,也就是说调用这个方法的时候,组件已经被渲染到了页面上,这个时候可以修改DOM。也就是说此时把相应事件再绑定到document上面,如下代码: componentDidMount:function(){ document.addEventListener('mousemove',(e)=>{this.move(e);},false);/*ES6新特性,箭头函数,需要依赖jsx编译工具才能正确运行*/ document.addEventListener('mouseup',(e)=>{this.endDrag(e);},false); }, 这样就可以消除那个小小的bug啦! 三、增加边缘检测 一般情况下的拖拽,我们都是不希望能够拖出可视窗口之外的,因此这就需要检测。检测四个方向上的位置,即上、下、左、右。显然,上的距离top和左边left的距离必须要大于等于0,下边和右的距离必须要小于视口大小减去from本身的元素宽高。 具体代码: move:function(event){ var e = event ? event : window.event; var dBox=ReactDOM.findDOMNode(this.refs.dragBox); if (this.state.flag) { var nowX = e.clientX, nowY = e.clientY; var disX = nowX - this.state.currentX, disY = nowY - this.state.currentY; /*增加拖拽范围检测*/ var currentLeft=parseInt(this.state.left) + disX; var currentTop=parseInt(this.state.top) + disY; var docX=document.documentElement.clientWidthdocument.body.clientWidth; var docY=document.documentElement.clientHeightdocument.body.clientHeight; if(currentLeft<=250){//检测屏幕左边,因为我这里的初始居中是利用了负1/2的盒子宽度的margin,所以用250px判断边界 dBox.style.left=250+"px"; }else if(currentLeft>=(docX-dBox.offsetWidth+250)){ //检测右边 dBox.style.left=(docX-this.state.offsetX)+"px"; }else{ dBox.style.left =currentLeft+ "px"; } if(currentTop<=200){ //检测屏幕上边,因为我这里的初始居中是利用了负1/2的盒子高度的margin,所以用200px判断边界 <br> dBox.style.top=200+"px"; <br> }else if(currentTop>=(docY-dBox.offsetHeight+200)){ //检测下边<br> dBox.style.top=(docY-this.state.offsetY)+"px";<br> }else{<br> dBox.style.top = currentTop + "px"; <br> }<br> } PS:新的代码已经更新在我的github上面,大家可以研究一下。 ReactJS的背景和原理 在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的两次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。 如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道,服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。换句话说,任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端,每做一点界面的更新,你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能,则是React框架要完成的事情。 借用Facebook介绍React的视频中聊天应用的例子,当一条新的消息过来时,传统开发的思路如上图,你的开发过程需要知道哪条数据过来了,如何将新的DOM结点添加到当前DOM树上;而基于React的开发思路如下图,你永远只需要关心数据整体,两次数据之间的UI如何变化,则完全交给框架去做。可以看到,使用React大大降低了逻辑复杂性,意味着开发难度降低,可能产生Bug的机会也更少。
F. 原来Babel 能直接编译 JSX.官方用的是哪个
习惯了WebStorm的话..我就假设题主会用Node.js和npm啦~一句话总结:用WebStorm自带的FileWatcher功能+Babel实现自动转换ECMAScript6代码为ES5代码我是这么配置的..就先新建一个EmptyProject,然后在src目录下新建了一个main.js;//这一步不是必须的只是刚上手的话从空项目开始自己配置会少很多干扰Then..进入设置,把JavaScriptlanguageversion改成ECMAScript6;再Then..写一段ES6代码'usestrict';//node直接运行ES6代码时,如使用了ES6的一些关键字,比如let,就需要严格模式,否则会报错//这是没有严格模式时候的错误提示//SyntaxError:Block-scopeddeclarations(let,const,function,class)*fibs(){//GeneratorFunctionleta=0;letb=1;while(true){yielda;//[a,b]=[b,a+b];b=a+b;a=b-a;}}let[first,second,third,fourth,fifth,sixth]=fibs();console.log(first,second,third,fourth,fifth,sixth);现在IDE会出现一个Filewatcher提示条先别点Addwatcher!我们要先去装babel~首先在根目录新建一个package.json{"name":"test-project","version":"1.0.0"}然后打开IDE的Terminal,安装babel-clinpminstall--save-devbabel-cliGood!现在可以去点Addwatcher啦,点完之后会弹出一个框,其中大部分设置IDE都帮你搞定了下面第三行,Program那一项,填$ProjectFileDir$/node_moles/.bin/babel然后点OK,这个时候你就会发现左边多出来一个main-compiled.js文件啦但是还没搞定!现在只是搞定了自动转换的功能,系统默认把ES6compile成了ES6..(你应该会发现compile出来的东西跟原来的一样..Generator函数并没有被转换成ES5的格式)所以我们需要安装Babel的preset以正确识别ES6代码;和刚才一样,在npm安装babel的ES6的presetnpminstall--save-devbabel-preset-es2015在根目录下新建一个.babelrc文件(就是babel在当前项目的配置文件),写上{"presets":["es2015"]}OK搞定!保存再回去看一下main-compiled.js应该就变成这个样子啦,现在你在main.js里直接写ES6代码,IDE都会自动compile成ES5的代码在这里啦~注意:想直接用Node.js运行ES6代码还是有些问题..因为这段代码用的ES6的解构赋值Node.js还未完全支持,需要在运行的时候加入一些tags(以开启Node.js的相关试验特性),具体可以参考Node.js官网对ES6的说明:ECMAScript2015(ES6)。
G. Adobe bridge cc 2022 安装成功 但是有一个错误 bridge-12.jsx 脚
摘要
H. 在react jsx中,为什么使用箭头函数和bind容易出现问题
在创作上,《三国演义》继承了传统史学的实录精神,“七实三虚”可以说是该书取材的基本原则,小说中虽有不少虚构成分,但大的历史事件皆取之于史册,主要人物的性格、经历也基本符合史实。
I. 请问怎么学习react.js
一、JSX介绍
①定义
JSX=JavaScript XML,是一种在React组件内部构建标签的类XML语法。React在不使用JSX的情况下一样可以工作,但是使用JSX可以提高组件的可读性,增强JS语义,结构清晰,抽象程度高,代码模块化。因此推荐在React中使用JSX。
②特点
1、元素名首字母大写
2、符合嵌套规则
3、可以写入求值表达式
4、驼峰式命名
5、不能使用javascript原生函数的一些关键词,如for和class。需要替换成htmlFor和className
③使用方法
1、使用动态值:JSX将两个花括号之间的内容{...}渲染为动态值,花括号指明了一个javascript上下文环境,花括号里面可以是一个变量,也可以是函数。 例如:
var name=“winty”;
<p>{name}</p>
function date(d){
return [
d.getFullYear(),
d.getMonth()+1,
d.getDate()
].join('-);
};
<p>{date(new Date()}</p>
2.注释:首先,在子节点中注释要用大括号包裹起来,然后就可以单行注释/**/,也可以多行注释//。
var Hello=React.createClass({
render:function(){
return <p name="winty"> //set name
Hello ,World
/*
多行注释
多行注释
*/
</p>
}
});
3.使用CSS内联样式
var style={
color:#000;
};
React.render(<div style={style}>....</div>,document.body);
4.使用条件判断
//方法1,三目运算符
var Hello=React.createClass({
render:function(){
return <p>Hello,{this.props.name?this.props.name : "LuckyWinty"}</p>
}
});
//方法2,if-else语句
var Hello1=React.createClass({
getName:function(){
if(this.props.name)
return this.props.name;
else
return "LuckyWinty";
render:function(){
return <p>Hello,{this.getName}</p>
}
});
//方法3,使用逻辑||运算符
var Hello3=React.createClass({
render:function(){
return <p>Hello,{this.props.name||"LuckyWinty"}</p>
}
});
④非DOM属性介绍
JSX中有3个非DOM属性,分别是:dangerouslySetInnerHTML、ref、key。
dangerouslySetInnerHTML:在JSX中直接插入HTML代码,但是如果能避免使用这个属性则尽量避免使用。
不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击 的原因之一。
在彻底的理解安全问题后果并正确地净化数据之后,生成只包含唯一 key __html 的对象,并且对象的值是净化后的数据。例如:
function createMarkup() {
return {__html: 'First · Second'};
};
<div dangerouslySetInnerHTML={createMarkup()} />
ref:父组件引用子组件,你可以通过在属性中设置期望的引用名来定义一个引用。例如:
...
render:function(){
return <div>
<input ref="MyInput" .../>
</div>
}
...
//然后你就可以在组件中的任何地方使用this.refs.myInput获取这个引用了
key:是一个可选的唯一标识符,通过给组件设置一个独一无二的键,并确保它在一个渲染周期中保持一致,使得React能够更只能地决定应该重用一个组件还是销毁并重建一个组件,进而提高渲染性能。例如:
var Hello3=React.createClass({
render:function(){
return <ul>
<li key="1">1</li>
<li key="2">2</li>
<li key="3">3</li>
</ul>
}
});
二、React组件生命周期详解
组件本质上就是状态机,输入确定,输出一定确定。状态和结果一一对应,从而使程序变得直观。状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。可以用事件的思路来理解状态,但是事件与事件之间互相独立,但是不同状态之间可能会互相影响。
组件的所有状态结合起来就成了组件的生命周期。即:初始化阶段->运行中阶段->销毁阶段。
不同生命周期内可以自定义的函数
初始化阶段:
①getDefaultProps:获取默认属性,只调用一次,是在createClass之后调用的。实例之间共享引用
②getInitialState:初始化每个实例的特有初始化状态
③componentWillMount:mout就是装载的意思,这个方法的意思就是说组件即将被装载到页面中,也是render之前最后一次修改状态的机会
④render:组件在render函数生成虚拟节点,最后由react将虚拟节点变成真正的节点渲染到页面上。只能访问this.props和this.state,只有一个顶层组件,最好不要修改状态和DOM输出。
⑤componentDidMount:组件被装载后才会被调用,也就是说调用这个方法的时候,组件已经被渲染到了页面上,这个时候可以修改DOM
这五个函数的执行顺序就是从上到下的。需要注意的是getDefaultProps只会在组件的第一个实例被初始化的时候被调用,也就是说第二个实例之后都是从getInitialState开始调用。同一个组件的所有实例的默认属性都是一样的。
主要测试代码:<script type="text/babel">
var Hello=React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps, 1");
},
getInitialState:function(){
console.log("getInitialState, 2");
return null;
},
componentWillMount:function(){
console.log("componentWillMount, 3");
},
render:function(){
console.log("render, 4");
return <p>Hi,LuckyWinty!</p>
},
componentDidMount:function(){
console.log("componentDidMount, 5");
},
});
React.render(<Hello></Hello>,document.body);
</script>
①componentWillReceiveProps:这个函数在组件即将接收到属性时触发的,或者是父组件的属性发生变化时,属性在传送到组件之前,开发者有机会通过这个函数去处理属性。比如修改,更新内部状态等。
②shouldComponentUpdate:当组件接收到新属性或者新状态的时候触发的。这个是一个疑问函数,也就是说我们可以告诉react不去更新某个组件。因为有时候属性或者状态并不会导致组件发生更新。在组件不需要更新的情况下,手动使shouldComponentUpdate返回false,这样react就不需要再经过render和diff算法去判断是否要更新,从而提高性能。
③componentWillUpdate:render触发之前触发,更新组件,不能修改属性和状态
④render:组件在render函数生成虚拟节点,最后由react将虚拟节点变成真正的节点渲染到页面上,只能访问this.props和this.state,只有一个顶层组件,最好不要修改状态和DOM输出。
⑤componentDidUpdate:render之后,真正的DOM被渲染之后调用
J. 如何评价 React Native
React native充分利用了Facebook的现有轮子,是一个很优秀的集成作品,并且我相信这个团队对前端的了解很深刻,否则不可能让Native code“退居二线”。
对应到前端开发,整个系统结构是这样:
JSX vs HTML
CSS-layout vs css
ECMAScript 6 vs ECMAScript 5
React native View vs DOM
无需编译,我在第一次编译了ipa装好以后,就再也没更新过app,只要更新云端的js代码,reload一下,整个界面就全变了。
多数布局代码都是JSX,所有Native组件都是标签化的,这对于前端程序员来说,降低了不少学习成本,也大大减少了代码量。不信你可以看看JSX编译后的代码。
复用React系统,也减少了一定学习和开发成本,更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json,然后由Native将这个数据映射成真正的布局视图。
css-layout也是点睛之笔,前端可以继续用熟悉的类css方式来编写布局,通过这个工具转换成constrain布局。
系
统只有js-objc的单向调用,就是把原生UI组件的方法通过javascritcore或者webview(低版本iOS)映射到js中来,整个调用
过程是异步的,这样的设计令React native可以让js运行在桌面chrome中,通过websocket连接Native
code和桌面chrome,极大地方便了调试。对其中的机制Bang的一篇文章写得很详细,我就不拾人牙慧了:React Native通信机制详解 « bang’s blog 。但这样设计也会带来一些问题,后面说。
点按操作也被抽象成了一组组件(TouchableXXX),这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web“手感”不同的原因:实时的点按反馈和取消能力。React Native 这套相应机制设计得很完善,能像Native code那样控制整个点按操作的所有过程。
Debug
相当方便!修改了js以后,通过内建的nodejs
watcher编译成bundle,在模拟器里面按cmd+r就可以看到效果。而且按cmd+d,可以打开一个chrome窗口,所有的js都移到了
chrome里面运行,所以什么断点单步打调用栈,都不在话下。
上面的既是特点也是优点,下面说说缺点,或者应该说:“仍然遗留的问题”,在我看来,这个方案已经超越了Hybird方案。
系
统仍然(不得不)依赖原生组件暴露出来的组件和方法。举两个例子,ScrollView这个组件,在Native层是有大量事件
的,scrollViewWillBeginDragging,
scrollViewWillEndDragging,scrollViewDidEndDragging等等,这些事件在现有的版本都没有暴露,基本上
做不了组件联动效果。另外,这个版本中有大量组件是iOS
only的:ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、
SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、
PushNotificationIOS、StatusBarIOS、VibrationIOS,反过来看,剩余的都是一些抽象程度极强的基本组件。这
样,用户必须在不同的平台下写两套代码,而且所有能力仍然强烈依赖 React native 开发人员暴露的接口。
由于最外层是
React,初次学习成本高,不像往常的Hybird方案,只要多学几个JS
API就可以开始干活了。当然,React的确让后续开发变得简单了一些,这么一套外来的(基于iOS)、残缺不全的(css-layout)在
React的包装下,的确显得不那么面目可憎了。
另外,React Native仍然很不完善。文档还不全,我基本上是看着他的示例代码完成的demo,集成到已有app的文档也是今天才出来。按照官方的说法,Android版本要到半年后才发布:Blog | React ,届时整个系统设计可能还会有很大的变化。