一) 定义对象:
const STATUS_ENUM = {
0: {
text: '明于',
text2: '负向'
},
https://www.runoob.com/js/js-obj-intro.html
在 JavaScript中，几乎所有的事物都是对象。
访问对象属性
你可以通过两种方式访问对象属性:
实例 1
person.lastName;
二) 实例 2
person["lastName"];
访问对象的方法
三) 常用的箭头函数格式
const Statistics = (props) => {
return (
<div>
</div>
);
}
https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080
箭头函数的讲解 , 此处是输入props , 返回一个组件 给 Statistics
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
四) useEffect 钩子
useEffect(() => {
if (analyseId > 0) {
request(getQueryPath(
四种钩子之一 https://www.ruanyifeng.com/blog/2019/09/react-hooks.html
useEffect(() => {
}, [analyseId]);
https://www.ruanyifeng.com/blog/2019/09/react-hooks.html
useEffect()用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前，放在componentDidMount里面的代码，现在可以放在useEffect()。
useEffect()的用法如下。
useEffect(() => {
// Async Action
}, [dependencies])
上面用法中，useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。
useState 用法
const [testDataState, setTestData] = useState({});
this.state 功能完全相同
它定义一个 “state 变量”。我们的变量叫 count， 但是我们可以叫他任何名字，比如 banana。这是一种在函数调用时保存变量的方式 —— useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。
我们声明了一个叫 count 的 state 变量，然后把它设为 0。React 会在重复渲染时记住它当前的值，并且提供最新的值给我们的函数。我们可以通过调用 setCount 来更新当前的 count。
箭头函数的格式
箭头函数: https://juejin.cn/post/6844903616231260174
this 的作用域
this
箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。
回顾前面的例子，由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = function () {
return new Date().getFullYear() - this.birth; // this指向window或undefined
};
return fn();
}
};
现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：
var obj = {
birth: 1990,
getAge: function () {
var b = this.birth; // 1990
var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
return fn();
}
};
obj.getAge(); // 25
如果使用箭头函数，以前的那种hack写法：
var that = this;
就不再需要了。
由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：
var obj = {
birth: 1990,
getAge: function (year) {
var b = this.birth; // 1990
var fn = (y) => y - this.birth; // this.birth仍是1990
return fn.call({birth:2000}, year);
}
};
obj.getAge(2015); // 25
onvertedData[]
const convertedData = {};
if (convertedData[v.testId]) {
对象的取值 , 和点语法取值 一样的
字典遍历
{Object.keys(analyseData).map(((k, i) => { return () }}
使用 Array.map、Object.values 和 Object.keys 对象的所有keys 是一个字典。
Object.keys(analyseData) 获取到所有的 key值 , 是一个数组 , .map 處理「物件中有物件」和「陣列中有物件」的情況。
https://cythilya.github.io/2018/06/17/array-and-object-handling/
构造新型的箭头函数
const columns = ({
analyseId,
setAnalyseId,
setEditModal,
deleteRecord
}) => ([{
title: 'ID',
dataIndex: 'id'
}, {
title: '对比数据',
dataIndex: 'source',
render: v => SOURCE_ENUM[v]
},]);
useRef
const pageRef = useRef({
current: 1
});
输入输出的关系 返回处理好的值
https://github.com/puxiao/react-hook-tutorial/blob/master/12%20useRef%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95.md
他的作用是“勾住”某些组件挂载完成或重新渲染完成后才拥有的某些对象，并返回该对象的引用。该引用在组件整个生命周期中都固定不变，该引用并不会随着组件重新渲染而失效。
const refContainer = useRef(initialValue);
useRef 返回一个可变的 ref 对象，对象里只有一个current属性，返回的 ref 对象在组件的整个生命周期内保持不变。
箭头函数
request('/gapi/ABTest/updateAnalyse', {
method: 'POST',
body: {
...params,
},
}).then((res = {}) => {
if (res.code === 0) {
} else {
message.error(res.message || 'error');
}
});
useEffect(() => {}
上面例子中，useEffect()的参数是一个函数，它就是所要完成的副效应（改变网页标题）。组件加载以后，React 就会执行这个函数。（查看运行结果）
useEffect()的作用就是指定一个副效应函数，组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行。
六、useEffect() 的第二个参数
有时候，我们不希望useEffect()每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。
如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。
https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html
==EditModal==
... 语法
JS中三个点（...）是什么鬼？
- 复制用它
- 合并用它
- 字符转数组用它
- 函数传参用它
useCallback
https://blog.csdn.net/sinat_17775997/article/details/94453167
随机数
const getRandomId = () => {
const s4 = () => Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
return `${Date.now()}${s4()}${s4()}${s4()}${s4()}${s4()}${s4()}`;
}
Math.random()方法返回大于等于 0 小于 1 的一个随机数。
.toString(16) 转化为16进制
0x10000 ox 是16进制
0开头的是 8进制
https://www.cnblogs.com/jokerjason/p/7404649.html
const FormItem = Form.Item;
表单的使用技巧
InputNumber 使用
{...formItemLayout} layout的 三个点语法
布局方式
type="flex" style={{ justifyContent: 'flex-start', alignItems: 'center', flexWrap: 'nowrap' }
{getFieldDecorator(`featureJson[${data.hashId}]
下拉选择框
<Select style={{ width: 360 }} optionFilterProp="children" showSearch>
{featureList.map(name => (
<Select.Option value={name}>{name}</Select.Option>
))}
</Select>
<Button> 使用
<Button
type="link"
style={{ color: '#1890ff' }}
onClick={() => {
crudTestList({
action: 'delete',
hashId: data.hashId
});
}}
>
删除
</Button>
label=" 置信度" 特殊符号的使用
https://m.imooc.com/wenda/detail/468384
表示空格。是javascript里面的转义字符！例如:<p> abc</p>这时候浏览器会忽略掉abc前面得空格 为了在前面有空格，通常使用<p> abc</p>
代表空格
输入框使用
InputNumber
min={0}
max={100}
style={{ width: 80 }}
/>
https://ant.design/components/input-number/ 输入框参见这里
const submitForm = useCallback(() = 使用
https://juejin.cn/post/6844904032113278990
<Modal> 的使用
Select 的使用
https://ant.design/components/select/#header
TextArea 的使用
https://ant.design/docs/spec/data-entry#Textarea
控件的使用
import {
Form, Modal, Select, Radio, DatePicker,
Row, Button, Input, Icon, InputNumber, message
} from 'antd';
https://ant.design/components/form/#header
https://ant.design/components/modal/#header
https://ant.design/components/select/#header
https://ant.design/components/radio/#header
https://ant.design/components/date-picker/#header
https://ant.design/components/grid-cn/#Row
https://ant.design/components/button-cn/#header
https://ant.design/components/icon-cn/#header
https://ant.design/components/message-cn/#header
