二十用上下文管理應用

使用react可以很容易通過react元件跟蹤資料流。當你看到乙個元件，你就可以看到哪些props正在傳遞，這使得你的應用很容易知道在做什麼。

在某些情況下，你希望通過元件樹傳遞資料，而不是在每個級別的中元件手動傳遞props，你可以直接在react中使用強大的「context」來做到這一點。

絕大多數的應用不需要直接使用context。

如果你希望你的應用是穩定的，那麼就不要使用context。因為這是乙個實驗性質的api，它可能會在未來的react版本中移除。

如果你不熟悉state管理庫如redux或mobx，不要使用context。對於許多實際的應用，這些state管理庫和react一起使用來管理那些與元件相關的state乙個很不錯的選擇。很多情況下使用redux就可以解決你的問題，而不是使用context。

如果你不是乙個有經驗的react開發人員，不要使用context。使用props和state來實現功能是乙個更好的方法。

儘管有上面這些警告你還堅持使用context，那麼請將context單獨隔離到乙個小區域中，並盡可能地避免直接使用context，以便在這個api更改時應用能更容易公升級。

假設你有乙個結構：

import react from
'react';
import reactdom from
'react-dom';
class
mybutton
extends
react.component
render() ;
return
style=>button>
;    }
}class
message
extends
react.component
color=>刪除mybutton>
div>)}
}class
messagelist
extends
react.component
div>
;    }
}const messages = ['zhangyato', 're: zhangyatao', 're:re:zhangyatao'];
reactdom.render(
messages=/>,
document.getelementbyid('root')
);

在這個例子中，我們手動傳入乙個colorprops進行傳遞，以便適當地設定mybutton和message元件的樣式。使用context，我們可以讓color自動在元件樹中傳遞：

import react from
'react';
import reactdom from
'react-dom';
class
mybutton
extends
react.component
render() ;
return
style=>button>
;    }
}mybutton.contexttypes = ;
class
message
extends
react.component
刪除mybutton>
div>)}
}class
messagelist
extends
react.component
;    }
render() div>
;    }
}messagelist.childcontexttypes = ;
const messages = ['zhangyato', 're: zhangyatao', 're:re:zhangyatao'];
reactdom.render(
messages=/>,
document.getelementbyid('root')
);

通過向messagelist（context提供者）新增childcontexttypes和getchildcontext，react就會自動傳遞context資訊，子元件樹中的任何元件（button）都可以通過定義contexttypes來訪問它。

如果未定義contexttypes，那麼context將是乙個空物件。

context還可以讓你實現父元件和子元件之間的互動。例如，以這種方式工作的乙個比較知名的庫為react router v4：

const routerexample = () =>

通過從routerexample元件傳遞一些資訊，每個link和match可以回傳到包含的router中。

在使用類似於此的api進行構建元件之前，請考慮是否有更好的替代品。例如，你可以傳遞整個react元件作為props。

如果在乙個元件中定義了contexttypes，則以下生命週期方法將多接收個引數，就是context物件：

如果contexttypes被定義為無狀態功能性元件的屬性，無狀態功能性元件也能夠引用context。下面的**顯示了被寫成乙個無狀態的功能元件的mybutton元件。

function
mybutton(props, context) }>
button>
);}mybutton.contexttypes = ;

千萬不要這麼做！！！

react有乙個api來更新context，但它從根本上破壞了context，所以你不應該使用它。

當state或props改變時，getchildcontext函式將被呼叫。為了更新context中的資料，使用this.setstate()觸發元件內的state更新。這也將觸發乙個新的context，並且context改變的內容也會被子元件接收到。

import react from
'react';
import reactdom from
'react-dom';
class
mediatype
extends
react.component
div>
}}mediatype.contexttypes = ;
class
mediaquery
extends
react.component
;        this.checkmediaquery = this.checkmediaquery.bind(this);
}getchildcontext() 
}checkmediaquery() );
}componentdidmount() 
render() div>
;    }
}mediaquery.childcontexttypes = ;
reactdom.render(
mediaquery>
,    document.getelementbyid('root')
);

問題是，context的值通過元件更新來提供，如果中間的父元件在shouldcomponentupdate()返回false，那麼使用該context值的後代元件永遠不會被更新。使用context完全不受元件的控制，所以基本上沒有辦法可靠地更新context。這篇文章很好的解釋了為什麼這是乙個問題，以及你應該如何擺脫它。

二十用上下文管理應用

flask 核心之應用上下文及請求上下文

Flask之請求上下文應用上下文的概述

Flask 中請求上下文和應用上下文的區別和作用？

二十 用上下文管理應用

flask 核心 之 應用上下文 及 請求上下文

Flask之請求上下文 應用上下文的概述

Flask 中請求上下文和應用上下文的區別和作用？

相關推薦

二十用上下文管理應用

flask 核心之應用上下文及請求上下文

Flask之請求上下文應用上下文的概述