华兴资本

需要用java语言,需要用什么东西,都是从头现学的
认准干这个事儿,就缺什么补什么

基金系统业务研发
熟悉react技术栈
css。html。js
盒子模型。布局
熟悉一个框架,vue。react。
多浏览器调试
团队的重要性

谁能大致说下vue和react的最大区别之处?

可能是先接触的vue吧,后来工作需要学习的react。用react工作一段时间了还是觉得react更简单些,尤其是做一些表单的新增编辑回显的时候,觉得vue的数据双向绑定方便些。一开始用react都写不明白。现在用了一年多可能是习惯了,尤其是hook 出来以后,觉得react也挺好用的,
感觉React 是手动挡,Vue 是自动挡。

要说详细一点区别嘛
1.react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流
而vue的思想是响应式的,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。
2.还有就是
react的思路是all in js,通过js来生成html,所以设计了jsx,还有通过js来操作css
vue是把html,css,js组合到一起,用各自的处理方式,
3.react是类式的写法,api很少.像一个{}花括号,就可以在里面写js了,想写判断,就直接写个三元表达式。
而vue是声明式的写法,通过传入各种options,api和参数都很多。所以react结合typescript更容易一起写,vue稍微复杂。像v-if。v-show。
总结,感觉vue更简单自动化,想傻瓜相机,而react,需要自己区手动调焦
但是hook的出现,让我觉得react更加好用了

使用React hook的好处

// 声明一个叫 "count" 的 state 变量
import React, { useState, useEffect } from 'react';

function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = You clicked ${count} times;
});

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
复杂组件变得难以理解
我们经常维护一些组件,组件起初很简单,但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如,组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是,同一个 componentDidMount 中可能也包含很多其它的逻辑,如设置事件监听,而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分,而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug,并且导致逻辑不一致。

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

生命周期

componentWillMount:
在组件挂载到DOM前调用,且只会被调用一次,在这边调用this.setState不会引起组件重新渲染,也可以把写在这边的内容提前到constructor()中,所以项目中很少用。

render:
根据组件的props和state(无两者的重传递和重赋值,论值是否有变化,都可以引起组件重新render) ,return 一个React元素(描述组件,即UI),不负责组件实际渲染工作,之后由React自身根据此元素去渲染出页面DOM。render是纯函数(Pure function:函数的返回结果只依赖于它的参数;函数执行过程里面没有副作用),不能在里面执行this.setState,会有改变组件状态的副作用。

1.componentDidMount:组件挂载到DOM后调用,且只会被调用一次
2.componentDidUpdate(prevProps, prevState)
此方法在组件更新后被调用,可以操作组件更新的DOM,prevProps和prevState这两个参数指的是组件更新前的props和state

3.componentWillUnmount
此方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清楚组件中使用的定时器,清楚componentDidMount中手动创建的DOM元素等,以避免引起内存泄漏。

团队的重要性

团队的重要性吧,技术不会可以慢慢学嘛
需要用java语言,需要用什么东西,都是从头现学的
认准干这个事儿,就缺什么补什么

css盒模型布局

flex-direction 决定元素的排列方向

row 默认值,主轴为水平方向,(左 => 右)
column 主轴为垂直方向,(上 => 下)

flex-wrap 决定元素如何换行
nowrap 默认值,只显示一行,不换行
wrap 多行显示

justify-content 定义主轴为水平方向,分布方式。
flex-start 水平方向起点开始对齐
flex-end 水平方向结束位置对齐
center 居中对齐
space-between 两端对齐,平均间隔
space-around 每个子元素都有相等的外边距,相邻元素外边距不会叠加
align-items 定义主轴为垂直方向,分布方式。
flex-start 垂直方向起点开始对齐
flex-end 垂直方向结束位置对齐
center 垂直方向居中对齐
baseline 与基线对齐(有图)

插件

"antd": "^4.8.0",
"array-move": "^3.0.1",
"axios": "^0.21.1"
"bizcharts": "^4.0.7",
"craco-less": "^1.17.0",
"crypto-js": "^4.0.0",
"echarts": "^4.9.0",
"echarts-for-react": "^2.0.16",
"file-saver": "^2.0.2",
"moment": "^2.29.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-ace": "^9.4.0",
"react-app-polyfill": "^2.0.0",
"react-async-component": "^2.0.0",
"react-clipboard": "^1.3.2",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"sql-formatter": "^4.0.2",
"util": "^0.12.3",

单向数据流 and 双向数据流

单向数据流,在React中,这意味着:
单项数据流并不是React独有的概念,但是作为JavaScript开发人员,这可能是您第一次听到他。
通常,此概念意味着数据只有一种方式可以传输到应用程序的其他部分。
该视图是应用程序状态的结果。成员只有在操作采取行动时。状态更新将传递到视图和子组件
,才能改变。当动作发生时,状态被更新。
得益于单项绑定,数据不能以相反的方式流动(例如,双向数据会发生这种情况),这具有一些关键优势:
她更不容易出错,因为您可以更好地控制数据。

React的一大创新,就是把每一个组件都看成一个状态机,组件内部通过state来维护组件状态的变化,这也是state唯一的作用。

双向数据流
无论数据改变,或是用户操作,都能带来相互的变动,自动更新。

优缺点
单向数据流优缺点
优点
1、所有状态的改变可记录、可跟踪,源头易追溯。
2、所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。
3、一旦数据变化,就去更新页面(data-页面),但是没有(页面-data)
4、如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

缺点
1、HTML代码渲染完成,无法改变,有新数据,就需把旧HTML代码去掉,整合新数据和模板重新渲染。
2、代码量上升,数据流转过程变长,出现很多类似的样板代码。
3、同时由于对应状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。

双向数据绑定的优缺点
优点
1、用户在视图上的修改会自动同步到数据模型中去,数据模型中值的变化也会立刻同步到视图中去。
2、无需进行和单向数据绑定的那些相关操作。
3、在表单交互较多的场景下,会简化大量业务无关的代码。

缺点
1、无法追踪局部状态的变化。
2、“暗箱操作”,增加了出错时debug的难度。
3、由于组件数据变化来源入口变得可能不止一个,数据流转方向易紊乱,若在缺乏“管制”手段,血崩

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,692评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,482评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,995评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,223评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,245评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,208评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,091评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,929评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,346评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,570评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,739评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,437评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,037评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,677评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,833评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,760评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,647评论 2 354

推荐阅读更多精彩内容

  • CSS Flex弹性布局 容器的属性:flex-direction: 决定主轴的方向 row行左从左到右、row-...
    程序员清欢阅读 464评论 0 0
  • 优化 react: constructor:构造函数,在创建组件之前调用(1次)componentWillMoun...
    SeaseeYoul阅读 364评论 0 0
  • 在线访问手册:https://hanxueqing.github.io/Web-Front-end-Intervi...
    视觉派Pie阅读 1,079评论 0 0
  • 1. HTML 1. 必考:你是如何理解 HTML 语义化的? 荒野阶段:最开始是 PHP 后端写 HTML,不会...
    Qingelin阅读 700评论 0 0
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 124,976评论 2 7