Reac全家桶筆記

待學習：

react官網看三遍： 第一遍大體完成，待查漏補缺

react-router和react-redux看三遍：還沒有開始第一遍！ 

 react源碼研讀：還沒有開始

 

reactRouter: matchPath，withRouter

 

 

 

 

 

Action中獲取store:

 

屬性傳遞方式： 1.使用Context（謹慎使用） 2.組件自己做爲屬性傳遞 3.react-redux方式

 

組件懶加載：

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {

  return (

    <div>

      <Suspense fallback={<div>Loading...</div>}>

        <OtherComponent />

      </Suspense>

    </div>

  );

}

 

 

React開發流程：1.根據單一功能原則拆分組件 2.初步肯定每一個組件有哪些數據須要存放在state裏 3.找到那些組件間共享的state，把他們轉移到他們共同的父組件去（沒有就新建一個共同父組件）  4.複雜頁面自下而上編寫組件，簡單頁面反之 （具體每一步如何操做見下放或React官方文檔）

 

組合： 經過props.children拿到全部子元素

function Container(props) {

  return (

    <div className={'FancyBorder FancyBorder-' + props.color}>

      {props.children}

    </div>

  );

}

< Container > JSX 標籤中的全部內容都會做爲一個 children prop 傳遞給 Container組件。

Props 和組合爲你提供了清晰而安全地定製組件外觀和行爲的靈活方式。注意：組件能夠接受任意 props，包括基本數據類型，React 元素以及函數。

 

組件拆分：據單一功能原則來斷定組件的範圍。也就是說，一個組件原則上只能負責一個功能。若是它須要負責更多的功能，這時候就應該考慮將它拆分紅更小的組件。

 

自下而上意味着從最基本的組件開始編寫（好比 ProductRow）。當你的應用比較簡單時，使用自上而下的方式更方便；對於較爲大型的項目來講，自下而上地構建，並同時爲低層組件編寫測試是更加簡單的方式。

 

檢查相應數據是否該存在 state裏：

1.該數據是不是由父組件經過 props 傳遞而來的？若是是，那它應該不是 state。

2.該數據是否隨時間的推移而保持不變？若是是，那它應該也不是 state。

3.你可否根據其餘 state 或 props 計算出該數據的值？若是是，那它也不是 state。

 

 

如何判斷某個state應該屬於哪一個組件：

1.找到根據這個 state 進行渲染的全部組件。

2.找到他們的共同全部者（common owner）組件（在組件層級上高於全部須要該 state 的組件）。

3.該共同全部者組件或者比它層級更高的組件應該擁有該 state。

4.若是你找不到一個合適的位置來存放該 state，就能夠直接建立一個新的組件來存放該 state，並將這一新組件置於高於共同全部者組件層級的位置。

 

 

this.setState((state, props) => ({

  counter: state.counter + props.increment

}));

 

Babel 會把 JSX 轉譯成一個名爲 React.createElement() 函數調用。

如下兩種示例代碼徹底等效：

const element = (

 <h1 className="greeting">

    Hello, world!

 </h1>

);

const element = React.createElement(

 'h1',

 {className: 'greeting'},

 'Hello, world!'

);

 

全部 React 組件都必須像純函數同樣保護它們的 props 不被更改。

 

Render prop:

方式一：使用屬性：儘管以前的例子使用了 render，咱們也能夠簡單地使用 children prop！

<Mouse children={mouse => (

 <p>鼠標的位置是 {mouse.x}，{mouse.y}</p>

)}/>

Mouse組件的聲明中：

  render() {

    return (

      <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>

        {this.props.children(this.state)}

      </div>

    );

  }

方式二：children prop 並不真正須要添加到 JSX 元素的 「attributes」 列表中。相反，你能夠直接放置到元素的內部！

<Mouse>

 {mouse => (

    <p>鼠標的位置是 {mouse.x}，{mouse.y}</p>

 )}

</Mouse>

 

 

React生命週期：

 

index.js:2178 Warning: You cannot set a form field before rendering a field associated with the value.  報錯解決：使用setFields代替setFieldsValue便可

 

 

 

Acton中拿到任何state, 使用： store().get(‘stateName’)

export const getAllversions = callback => (dispatch, store) => {

 console.log('store.getstore():', store().get('version_list'));

 

 

 

表格多行傳參：

 

 

 

antd表單排版使用formItemLayout結合RowCol柵格佈局，既方便對齊還能實現響應式！

constformItemLayout = {

 labelCol: {

 xs: { span:24 },

 sm: { span:8 }

 },

 wrapperCol: {

 xs: { span:24 },

 sm: { span:16 }

 }

 };

 

 

在app組件中拿到共用信息，而後經過屬性都傳遞進去，節約請求數

 <Route

 path="/bus_category"

 render={() => <BUSCategory{...appProps}/>}

 />

 

瞭解connect（）中最後兩個參數的做用：

exportdefault connect(

 mapState,

 mapDispatch,

 undefined,

 {

 pure: false

 }

)(App);

 

 

函數做爲無狀態組件的使用：

const EllipsisTdContent = ({ text, width }) => {

 return (

 <div className="td-div" style={{ width }}>

 <span className="text-overflow" title={text}>

 {text}

 </span>

 </div>

 );

};

 

 

class calc{static count=10;

類成員的靜態屬性咱們能夠直接調用，調用方式爲如上例的count的調用方式：calc.count。而不能用this.count在類的內部使用。定義了static屬性的class不能用new實例化？？

 

let list: number[] = [1, 2, 3]; 等價於 let list: Array<number> = [1, 2, 3];

 

classNames庫的使用：

<a classNames('foo1', { foo2: false, bar: true }); // => 'foo1 bar'

></a>

 

 

exportclass MigrateDialogextends React.Component<any, IDialogState> {

如上： <>中，any約束this.props的類型，IDialogState約束this.state的類型

 

1.       函數自己能夠做爲無狀態組件被調用

2.       屬性就是參數，調用方法： <Hello name='joe’ />

 

console的調試：右鍵菜單和copy（）

 

使用fetch發get請求的都要設置帶上cookie,由於fetch請求默認不會帶cookie!：
    credentials: 'include',（這樣就會帶上cookie）
    mode: 'cors'

 

 

路由中設置可選參數：

React-router2.0 :

path="/Login(/:router)"

<Routepath="/Login(/:router)" Component={Login} />

React-router4.0:

path="/Login/:router?"

<Route path="/Login/:router?" Component={Login}/>

 

 

 

 

 componentWillReceiveProps(props) {

 let tmpObj = {};

 if (props.directory_list.length > 0) {

 props.directory_list.forEach((item, index) => {

 tmpObj[`check_${index}`] = item.selected;

 });

 this.setState({

 switchState: { ...tmpObj }

 });

 }

 }

 

 ).filter(item=> {

 return this.state.switchState[`check_${item.id}`] === 'N';

 });

 

 

靈活運用：

 

 

注意： 靈活使用find,findIndex,Filter,map等方法。

 

async函數就是對 Generator 函數的改進，只是將星號（*）替換成async，將yield替換成await,

 

 let submenu = await CustomizeAPI('menu', 'getSubmenuById', {

 

 downItem = async () => {

 

遞歸調用過濾內層數據！

 recurseDeleteNoUseSubmenu = subMenuData => {

 subMenuData = (subMenuData || []).filter(i=> i.checked !== false);

 for (leti = 0; i < subMenuData.length; ++i) {

 let tmp = subMenuData[i];

 tmp.menu = this.recurseDeleteNoUseSubmenu(tmp.menu);

 }

 return subMenuData;

 };

 

 

 const pos_arr = e.node.props.pos.split('-'); // todo: 這裏的node.props.pos是什麼？位置？

generator函數和promise

ES6 新增了 for..of 迭代器，它與 for..in 的區別是： 它返回的是值而不是 keys

 

find和filter區別：find返回一個對象，filter返回一個數組。

state中有什麼名（state.cus）取決於combineReducers裏傳的鍵：

能夠不傳mapDispatch:

exportdefault connect(mapState)(Progress);

 

 productShortCustomizeFlagList.find(item=> item.value === text).title

antd中，不僅是key不能重複，value也不能夠：

 <Optionvalue={item.client_name}key={item.id}>

 {item.client_name}

 </Option>

map防止遍歷空數組：

 {(projects_data || []).map((item, index) => (

Fiddler原理：

在本機開啓一個http的代理服務器，而後它會轉發全部的http請求和響應到最終的服務器

 

表格rowKey能夠以下這樣寫？不該該對應於某個record的某個鍵嗎？

遞歸遍歷菜單內容！

 

this.props.form.getFieldDecorator(id, options):

通過 getFieldDecorator 包裝的控件，表單控件會自動添加 value（或 valuePropName 指定的其餘屬性） onChange（或 trigger 指定的其餘屬性），數據同步將被 Form 接管，這會致使如下結果：

1.你再也不須要也不該該用 onChange 來作同步，但仍是能夠繼續監聽 onChange 等事件。

2.你不能用控件的 value defaultValue 等屬性來設置表單域的值，默認值能夠用 getFieldDecorator 裏的 initialValue。

3.你不該該用 setState，可使用 this.props.form.setFieldsValue 來動態改變表單值。

 

 

 

注意：獲取表單值用 e.target.value

test = (e)=>{

console.log('test:',e.target.value)

}

 

 

{window.dataRight.map(item => item.data_code).includes('button') ? (

 

 

兩個箭頭函數寫法

export const getServerList = (Offset, Limit) => dispatch => {

 

 

react好用組件大全：Awesome-react  https://github.com/enaqx/awesome-react

 

                   this.setState({

                            hasMore: count>0 && count<50

                   });

 

 

react要在本地運行，1.須要將BrowserRouter改爲    HashRouter 2. 從新webpack打包編譯運行

快速執行代碼方法：

1.寫入package.json某字段：  

"build": "./node_modules/.bin/webpack --progress --display-modules --profile --json > stats.json --colors —config webpack.production.config.js"

2.而後運行npm run build

 

 

一般dangerSetInnerHTML是和__html配套使用的，用來在一個標籤中插入許多個標籤

<div class="articleContainer" dangerouslySetInnerHTML={this.createMarkup()}></div>

         createMarkup() {

                   return {__html: this.state.newsItem.pagecontent};

         };

 

 

Antdesign 的表格中，選擇的鍵最好命名爲selectedRowKeys，否則可能出問題

 

屬性設置也須要大寫maxLength

 

視圖的任何改變都會觸發render

 

this.refs.childEdit.getEdited() 這種方式只能獲取到放在組件內部的子組件

 

 

父組件調用子組件方法：this.refs.childref.func()

 

既能傳參又不會立刻被調用的方法：onClick={()=>{this.onEdit(text, record)} }

 

 

不推薦經過ref獲取Input的值，若是非要經過ref獲取的話，能夠改爲這樣this.refs.email.refs.input.value，推薦監聽onChange來獲取值

 

  <Input ref='ipt' style={{margin:'0 10px'}} />  不是refs

 

組件的首字母必須大寫！

 

給組件添加約束條件：

BodyIndex.propTypes = {

         userid: React.PropTypes.number.isRequired

};

                                    

<BodyChild{...this.props}id={4}handleChildValueChange={this.handleChildValueChange.bind(this)}/>