React 相關知識點

1、元件中get的使用（作為類的getter）

es6知識：class類也有自己的getter和setter，寫法如下：

class component

// name的getter
getname()
// name的setter
setname
(value)
}

/*

* renderfullname的getter 
* 可以直接在render中使用this.renderfullname
*/get
renderfullname()
$`;}
render()
<
/div>
)}

constructor

(props);}
render()
$`;return
(<
/h2>
<
/div>);
}

// 較為優雅的寫法:，減少render函式的臃腫

renderfullname()
$`;}
render()
<
/div>
}

// 推薦的做法：通過getter而不是函式形式，減少變數

getrenderfullname()
$`;}
render()
<
/div>
}

依靠上述規則，那麼要使得 attr 的權重最高，應該放到最底層的元件中，而且位置盡量的靠後。

<

-- 父元件parent | 呼叫子元件並傳遞onchange屬性 --
>
/>
<
/div>
<
-- 子元件child | 接收父元件onchange， 自己也有onchange屬性 --
>
/>

1.如果只需要執行handleparentchange怎麼辦

input中 與 onchange= 換個位置。

2.如果兩個事件都需要執行怎麼辦

在child元件中 handlechildchange 中執行 this.props.handleparentchange

3、類中的方法用es6形式簡寫的不同之處： fn = () => {} 與 fn() {} 的區別

export

default class child
extends
component;}
// 寫法1，這是es6的類的方法寫法
fn1(
)// 寫法2，這是react的方法寫法
fn2=()
=>
, context: , refs: , …}
}render()
>fn1方法執行<
/button >
>fn2方法執行<
/button >
<
/div>);
}}

不過以下三種情況是相同的：

情況1：函式內部用不到this的時候，兩者相等

// 寫法1，這是es6的類的方法寫法

fn1(
)// 寫法2，這是react的方法寫法
fn2=()
=>

// 寫法1，這是es6的類的方法寫法

fn1(
), context: , refs: , …}
}// 寫法2，這是react的方法寫法
fn2=()
=>
, context: , refs: , …}
}render()
}>fn1方法執行<
/button >
}>fn2方法執行<
/button >
<
/div>);
}

// 寫法1，這是es6的類的方法寫法

fn1(
), context: , refs: , …}
}// 寫法2，這是react的方法寫法
fn2=()
=>
, context: , refs: , …}
}render()
>fn1方法執行<
/button >
>fn2方法執行<
/button >
<
/div>);
}

React相關知識點

reactcss模組化內聯樣式的方案 use strict import react from react import reactcss from reactcss render swatch popover cover return this.handleclick this.state.col...

React路由相關知識點

1.1 單頁面應用 單頁面得特點 只需要載入一次主頁面，通過區域性重新整理，就可以實現跳轉或者切換頁面 優點 載入速度快，使用者體驗比較好 缺點 1.2 安裝react router dom 在專案命令列中，執行 cnpm install react router dom s 在元件中通過物件的解構...

React知識點彙總

核心 元件系統，all in js,自動更新dom,三個階段，十乙個鉤子函式，更新狀態，react中的事件，可控和不可控元件 不需要特殊的開發環境，使用常見ide並安裝相應的外掛程式即可，react相容ie8及以上，其他主流的瀏覽器也相容，相容性較好。簡單來說就是all in js,將html，cs...