需要用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 (
You clicked {count} times
);
}
复杂组件变得难以理解
我们经常维护一些组件,组件起初很简单,但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如,组件常常在 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、由于组件数据变化来源入口变得可能不止一个,数据流转方向易紊乱,若在缺乏“管制”手段,血崩