需要用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、由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱，若在缺乏“管制”手段，血崩
网友评论