react學習總結

2021-09-25 02:10:43 字數 1719 閱讀 9040

目錄

1 react生命週期​

2 關於元件 classname 設定的問題

3 react 中實現一些動畫的效果

4 encodeuricomponent() 

5 react專案開發步驟推薦

6 webpack 的特色與功能

react 元件的生命週期整個過程如下:

對於自定義的元件,如果在元件引入的地方設定 classname ,就操作不了內部的元素的樣式。這種情況只能在元件定義的方法設定 classname,這樣才能操作內部的樣式的樣式。

如下不能操控 內部 ul 和 div 的樣式

//子元件

import react, from 'react';

class son extends component

}export default son;

//父元件

import react, from 'react';

import son from "./son";

class parent extends component

}export default parent;

而將 classname 設定在子元件中,這樣才能操控 內部元素的樣式

//子元件

import react, from 'react';

class son extends component

}export default son;

//父元件

import react, from 'react';

import son from "./son";

class parent extends component

}export default parent;

專案中遇到了一些要實現簡單的動態過渡效果,但是又找不多合適的 ui 元件,所以就自己按照一些帖子的方法做了。

我用到手風琴效果的 關鍵點:

我用的元件是 antd 提供的,樣式使用 css modules 實現的,應該是

可以把字串 作為 uri 元件進行編碼。

為什麼要這麼做:防止key或者value 中存在歧義,如某個 value 值是 sqrt=1。

encodeuri 與 encodeuricomponent 的區別?

有了專案的梗概,我們要做的第一件事情不是寫**,而是畫乙個簡單的原型圖,將不同的功能視覺化的展示出來。

先畫出專案的mokeup

mokeup圖劃分為不同的元件

實現靜態版本的程式和元件

將靜態版本的元件組合起來

考慮 state 的組成

互動元件的設計。包含內容crud(增刪查改);狀態切換的實現

最終版本

其中對於專案的目錄結構,推薦如下

**:歌特式靈魂擺渡人 的

自己想法:每個路由的介面可以做乙個容器。

特點:功能:

react學習初總結

這是第一次接觸react,以前都是在用vue做專案,突然來看react的語法其實還是特別的陌生,感覺非常的繞,但是總體感覺react的把函式式程式設計還是體現的淋漓盡致的,react是單向資料流的,而vue是雙向繫結,react的狀態改變是手動會觸發,而vue是響應式,每個狀態都是監聽的,在中小型專...

react學習知識總結

1 react設計思想及其獨特,屬於革命性創新,效能出眾,邏輯卻非常簡單。庫 library 小而巧,庫只提供了特定的api。優點是船小好調頭,可以很方便的從乙個庫切換到另外的庫,但是 幾乎不會改變。框架 framework 大而全,框架提供了一整套的解決方案。所以,如果在專案中間,想切換到另外的框...

react學習中錯誤總結

使用裝飾器報錯 報錯內容如下 the decorators plugin requires a decoratorsbeforeexport option,whose value must be a boolean.if you want to use the legacy decorators s...