react中這些細節你有註意過沒有？下面這篇文章為大家總結了一些你可能沒注意的react細節知識點。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
【相關教學推薦：React影片教學】
react中的一些細節知識點：
1、元件中get的使用（作為類別的getter）
ES6知識：class類別也有自己的getter和setter，寫法如下：
Class Component {
constructor() {
super()
this.name = ''
}
// name的getter
get name() {
...
}
// name的setter
set name(value) {
...
}
}登入後複製
react元件中的get的使用如下：
/*
* renderFullName的getter
* 可以直接在render中使用this.renderFullName
*/
get renderFullName () {
return `${this.props.firstName} ${this.props.lastName}`;
}
render() {
return (
<div>{this.renderFullName}</div>
)
}登入後複製
那getter在react元件中有什麼用處呢？ ？
constructor (props) {
super()
this.state = {};
}
render () {
// 常规写法，在render中直接计算
var fullName = `${this.props.firstName} ${this.props.lastName}`;
return (
<div>
<h2>{fullName}</h2>
</div>
);
}登入後複製
// 较为优雅的写法:，减少render函数的臃肿
renderFullName () {
return `${this.props.firstName} ${this.props.lastName}`;
}
render () {
var fullName = this.renderFullName() <div>{ fullName }</div> }登入後複製
// 推荐的做法：通过getter而不是函数形式，减少变量
get renderFullName () {
return `${this.props.firstName} ${this.props.lastName}`;
}
render () {
<div>{ this.renderFullName }</div>
}登入後複製
如果你了解Vue的話，那麼你知道其中的computed: {} 計算屬性，它的底層也是使用了getter，只不過是物件的getter不是類別的getter
// 计算属性，计算renderFullName
computed: {
renderFullName: () => {
return `${this.firstName} ${this.lastName}`;
}
}登入後複製
Vue的computed有一個優點就是：
計算屬性對比函數執行：會有緩存，減少計算---> 計算屬性只有在它的相關依賴發生改變時才會重新求值。
這意味著只要 firstName和lastName還沒有改變，多次存取renderFullName計算屬性會立即傳回先前的計算結果，而不必再執行函數。
那麼是否react的getter也有快取這個優勢嗎？ ？ ？ 答案是：沒有，react中的getter並沒有做快取優化！
2、元件的attr及事件執行順序：
# A、父子元件：以props形式，父傳給子
# B、同一組件：後面覆蓋前面。
依賴上述規則，那麼要使得 attr 的權重最高，應該放到最底層的組件中，而且位置盡量的靠後。
<-- 父组件Parent | 调用子组件并传递onChange属性 -->
<div>
<Child onChange={this.handleParentChange} />
</div>
<-- 子组件Child | 接收父组件onChange， 自己也有onChange属性 -->
<input {...this.props} onChange={this.handleChildChange} />登入後複製
此時，Child元件執行的onChange只是執行handleChildChange事件，handleParentChange事件並不會執行.
- 1.如果只需要執行handleParentChange怎麼辦？ ？ input中 {...this.props} 與 onChange={this.handleChildChange } 換個位置。
- 2.如果兩個事件都需要執行怎麼辦？ ？ 在Child元件中 handleChildChange #中執行 this.props.handle、cf方法以ES6形式簡寫的差異： fn = () => {} 與 fn() {} 的差異：
export default Class Child extends Component {
constructor (props) {
super()
this.state = {};
}
// 写法1，这是ES6的类的方法写法
fn1() {
console.log(this)
// 输出 undefined
}
// 写法2，这是react的方法写法
fn2 = () => {
console.log(this)
// 输出：Child {props: {…}, context: {…}, refs: {…}, …}
}
render () {
return (
<div>
<button onClick={this.fn1}>fn1方法执行</button >
<button onClick={this.fn2}>fn2方法执行</button >
</div>
);
}
}登入後複製
可見兩種寫法，函數內的this指向時不同的。
那它們就沒有相同之處嗎？ ？ ， 下列三種情況是相同的：情況1：函數內部用不到this的時候，兩者相等。
// 写法1，这是ES6的类的方法写法
fn1() {
return 1 + 1
}
// 写法2，这是react的方法写法
fn2 = () => {
return 1 + 1
}登入後複製
情況2：兩者在render中直接執行的時候。
// 写法1，这是ES6的类的方法写法
fn1() {
console.log(this)
// Child {props: {…}, context: {…}, refs: {…}, …}
}
// 写法2，这是react的方法写法
fn2 = () => {
console.log(this)
// 输出：Child {props: {…}, context: {…}, refs: {…}, …}
}
render () {
return (
<div>
<button onClick={() => {
this.fn1();
}}>fn1方法执行</button >
<button onClick={() => {
this.fn2();
}}>fn2方法执行</button >
</div>
);
}登入後複製
情況3：給this.fn2.bind(this)，綁定this作用上下文。
// 写法1，这是ES6的类的方法写法
fn1() {
console.log(this)
// Child {props: {…}, context: {…}, refs: {…}, …}
}
// 写法2，这是react的方法写法
fn2 = () => {
console.log(this)
// 输出：Child {props: {…}, context: {…}, refs: {…}, …}
}
render () {
return (
<div>
<button onClick={this.fn1}>fn1方法执行</button >
<button onClick={this.fn2.bind(this)}>fn2方法执行</button >
</div>
);
}登入後複製
阮一峰ES6： http://es6.ruanyifeng. com/#docs/object
4、清單渲染中的陣列
##參考：https: //doc.react-china.org/docs/lists-and-keys.html
正常的jsx寫法是在render中寫類似HTML的語法，標籤巢狀標籤
< input />
，有js，用{ 花括號}。
但不知道你注意過沒有，陣列可以嵌套在標籤內部
，正常渲染。
function NumberList(props) {
const numbers = [1,2,3,4,5];
// listItems是数组numbers通过map返回的，本质也是个数组。
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>
// 可以替换成 [ <li>1</li>, <li>2</li>, .....]
{listItems}
</ul>
);
}登入後複製
如上所示，標籤內部的陣列是可以正確渲染的，那麼就有以下的寫法：
renderItem(name) {
const A = <li key={'a'}>A</li>,
B = <li key={'b'}>B</li>,
C = <li key={'c'}>C</li>,
D = <li key={'d'}>D</li>;
let operationList;
switch (name) {
case 1:
operationList = [A , B, C]
break;
case 2:
operationList = [B, C, D]
break;
case 0:
operationList = [A]
break;
}
return operationList;
}
render() {
// this.renderItem() 执行结果是数组
return (
<ul>{ this.renderItem() }</ul>
)
}登入後複製
更多编程相关知识，请访问：编程视频！！
以上是你可能沒注意的一些react細節知識點！ （總結）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
