一) 定義對象:

const STATUS_ENUM = {
  0: {
    text: '明于',
    text2: '負(fù)向'
  },

https://www.runoob.com/js/js-obj-intro.html
在 JavaScript中，幾乎所有的事物都是對象。

訪問對象屬性

你可以通過兩種方式訪問對象屬性:

實(shí)例 1

person.lastName;

二) 實(shí)例 2

person["lastName"];
訪問對象的方法

三) 常用的箭頭函數(shù)格式

const Statistics = (props) => {
      return (
    <div>
    </div>
     );
}

https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080
箭頭函數(shù)的講解 , 此處是輸入props , 返回一個組件給 Statistics

全局 JavaScript 變量
在函數(shù)外聲明的變量是全局變量，網(wǎng)頁上的所有腳本和函數(shù)都能訪問它。
局部變量會在函數(shù)運(yùn)行以后被刪除。
全局變量會在頁面關(guān)閉后被刪除。
如果變量在函數(shù)內(nèi)沒有聲明（沒有使用 var 關(guān)鍵字），該變量為全局變量。

四) 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()用來引入具有副作用的操作，最常見的就是向服務(wù)器請求數(shù)據(jù)。以前，放在componentDidMount里面的代碼，現(xiàn)在可以放在useEffect()。
useEffect()的用法如下。

useEffect(()  =>  {
  // Async Action
}, [dependencies])

上面用法中，useEffect()接受兩個參數(shù)。第一個參數(shù)是一個函數(shù)，異步操作的代碼放在里面。第二個參數(shù)是一個數(shù)組，用于給出 Effect 的依賴項(xiàng)，只要這個數(shù)組發(fā)生變化，useEffect()就會執(zhí)行。第二個參數(shù)可以省略，這時每次組件渲染時，就會執(zhí)行useEffect()。

useState 用法

const [testDataState, setTestData] = useState({});

this.state 功能完全相同
它定義一個 “state 變量”。我們的變量叫 count，但是我們可以叫他任何名字，比如 banana。這是一種在函數(shù)調(diào)用時保存變量的方式 —— useState 是一種新方法，它與 class 里面的 this.state 提供的功能完全相同。一般來說，在函數(shù)退出后變量就會”消失”，而 state 中的變量會被 React 保留。
我們聲明了一個叫 count 的 state 變量，然后把它設(shè)為 0。React 會在重復(fù)渲染時記住它當(dāng)前的值，并且提供最新的值給我們的函數(shù)。我們可以通過調(diào)用 setCount 來更新當(dāng)前的 count。

箭頭函數(shù)的格式

箭頭函數(shù): https://juejin.cn/post/6844903616231260174

this 的作用域

this
箭頭函數(shù)看上去是匿名函數(shù)的一種簡寫，但實(shí)際上，箭頭函數(shù)和匿名函數(shù)有個明顯的區(qū)別：箭頭函數(shù)內(nèi)部的this是詞法作用域，由上下文確定。

回顧前面的例子，由于JavaScript函數(shù)對this綁定的錯誤處理，下面的例子無法得到預(yù)期結(jié)果：

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();
    }
};

現(xiàn)在，箭頭函數(shù)完全修復(fù)了this的指向，this總是指向詞法作用域，也就是外層調(diào)用者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

如果使用箭頭函數(shù)，以前的那種hack寫法：

var that = this;
就不再需要了。

由于this在箭頭函數(shù)中已經(jīng)按照詞法作用域綁定了，所以，用call()或者apply()調(diào)用箭頭函數(shù)時，無法對this進(jìn)行綁定，即傳入的第一個參數(shù)被忽略：

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]) {

對象的取值 , 和點(diǎn)語法取值一樣的

字典遍歷

 {Object.keys(analyseData).map(((k, i) => {    return ()  }}

使用 Array.map、Object.values 和 Object.keys 對象的所有keys 是一個字典。

Object.keys(analyseData) 獲取到所有的 key值 , 是一個數(shù)組 , .map 處理「物件中有物件」和「陣列中有物件」的情況。

https://cythilya.github.io/2018/06/17/array-and-object-handling/

構(gòu)造新型的箭頭函數(shù)

const columns = ({
  analyseId,
  setAnalyseId,
  setEditModal,
  deleteRecord
}) => ([{
  title: 'ID',
  dataIndex: 'id'
}, {
  title: '對比數(shù)據(jù)',
  dataIndex: 'source',
  render: v => SOURCE_ENUM[v]
},]);

useRef

  const pageRef = useRef({
    current: 1
  });

輸入輸出的關(guān)系返回處理好的值
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 對象在組件的整個生命周期內(nèi)保持不變。

箭頭函數(shù)

 request('/gapi/ABTest/updateAnalyse', {
        method: 'POST',
        body: {
          ...params,
        },
      }).then((res = {}) => {
        if (res.code === 0) {

         
        } else {
          message.error(res.message || 'error');
        }
      });

useEffect(() => {}

上面例子中，useEffect()的參數(shù)是一個函數(shù)，它就是所要完成的副效應(yīng)（改變網(wǎng)頁標(biāo)題）。組件加載以后，React 就會執(zhí)行這個函數(shù)。（查看運(yùn)行結(jié)果）

useEffect()的作用就是指定一個副效應(yīng)函數(shù)，組件每渲染一次，該函數(shù)就自動執(zhí)行一次。組件首次在網(wǎng)頁 DOM 加載后，副效應(yīng)函數(shù)也會執(zhí)行。

六、useEffect() 的第二個參數(shù)
有時候，我們不希望useEffect()每次渲染都執(zhí)行，這時可以使用它的第二個參數(shù)，使用一個數(shù)組指定副效應(yīng)函數(shù)的依賴項(xiàng)，只有依賴項(xiàng)發(fā)生變化，才會重新渲染。

如果第二個參數(shù)是一個空數(shù)組，就表明副效應(yīng)參數(shù)沒有任何依賴項(xiàng)。因此，副效應(yīng)函數(shù)這時只會在組件加載進(jìn)入 DOM 后執(zhí)行一次，后面組件重新渲染，就不會再次執(zhí)行。這很合理，由于副效應(yīng)不依賴任何變量，所以那些變量無論怎么變，副效應(yīng)函數(shù)的執(zhí)行結(jié)果都不會改變，所以運(yùn)行一次就夠了。
https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html

==EditModal==

... 語法

https://xqhys.blog.csdn.net/article/details/105736902?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_antiscanv2&utm_relevant_index=1

JS中三個點(diǎn)（...）是什么鬼？

復(fù)制用它
合并用它
字符轉(zhuǎn)數(shù)組用它
函數(shù)傳參用它

useCallback

https://blog.csdn.net/sinat_17775997/article/details/94453167

隨機(jī)數(shù)

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 的一個隨機(jī)數(shù)。
.toString(16) 轉(zhuǎn)化為16進(jìn)制
0x10000 ox 是16進(jìn)制
0開頭的是 8進(jìn)制

https://www.cnblogs.com/jokerjason/p/7404649.html

const FormItem = Form.Item;

表單的使用技巧

InputNumber 使用

{...formItemLayout} layout的三個點(diǎn)語法

布局方式

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里面的轉(zhuǎn)義字符！例如:<p> ??????abc</p>這時候?yàn)g覽器會忽略掉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

EDitModel 需要好好看看如何構(gòu)成的

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

react項(xiàng)目實(shí)戰(zhàn)筆記

react項(xiàng)目實(shí)戰(zhàn)筆記

一) 定義對象:

訪問對象屬性

實(shí)例 1

二) 實(shí)例 2

三) 常用的箭頭函數(shù)格式

四) useEffect 鉤子

useState 用法

箭頭函數(shù)的格式

this 的作用域

onvertedData[]

字典遍歷

構(gòu)造新型的箭頭函數(shù)

useRef

箭頭函數(shù)

useEffect(() => {}

... 語法

useCallback

隨機(jī)數(shù)

const FormItem = Form.Item;

InputNumber 使用

{...formItemLayout} layout的三個點(diǎn)語法

布局方式

{getFieldDecorator(`featureJson[${data.hashId}]

下拉選擇框

<Button> 使用

label="???置信度" 特殊符號的使用

輸入框使用

const submitForm = useCallback(() = 使用

<Modal> 的使用

Select 的使用

TextArea 的使用

控件的使用

EDitModel 需要好好看看如何構(gòu)成的

合計1000 行代碼理解好

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

react項(xiàng)目實(shí)戰(zhàn)筆記

一) 定義對象:

訪問對象屬性

實(shí)例 1

二) 實(shí)例 2

三) 常用的箭頭函數(shù)格式

四) useEffect 鉤子

useState 用法

箭頭函數(shù)的格式

this 的作用域

onvertedData[]

字典遍歷

構(gòu)造新型的箭頭函數(shù)

useRef

箭頭函數(shù)

useEffect(() => {}

... 語法

useCallback

隨機(jī)數(shù)

const FormItem = Form.Item;

InputNumber 使用

{...formItemLayout} layout的 三個點(diǎn)語法

布局方式

{getFieldDecorator(`featureJson[${data.hashId}]

下拉選擇框

<Button> 使用

label="???置信度" 特殊符號的使用

輸入框使用

const submitForm = useCallback(() = 使用

<Modal> 的使用

Select 的使用

TextArea 的使用

控件的使用

EDitModel 需要好好看看如何構(gòu)成的

合計1000 行代碼 理解好

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

{...formItemLayout} layout的三個點(diǎn)語法

合計1000 行代碼理解好