有興趣的小伙伴可以加Q群 879108483 互相學(xué)習(xí)
1.使用props傳值
具體實現(xiàn)
import React, { Component } from 'react';
/**父組件 */
export default class Parent extends Component {
state = {
msg: 1
}
render() {
return (
<div onClick={() => this.setState({ msg: this.state.msg + 1 })} >
{/* 子組件 */}
<Child msg={"傳遞給子組件的消息：" + this.state.msg.toString()} />
</div>
);
}
}
/**子組件 */
class Child extends Component {
// 默認(rèn)的props 可寫可不寫
static defaultProps = {
msg: 1
}
render() {
return (
<div>
{/* 通過props傳遞過來的參數(shù) */}
{this.props.msg}
</div>
)
}
}
2.使用context (上下文)
Context被歸類為高級部分(Advanced)，屬于React的高級API，但官方并不建議在穩(wěn)定版的App中使用Context刀崖。實際上很多優(yōu)秀的組件都是通過context來實現(xiàn)的，比如antd的主題樣式狈究。用好context可以使項目更靈活。
Context 不僅僅適用于父傳子盏求，還可以用來作為跨級傳遞數(shù)據(jù)抖锥，比如父組件傳孫子組件。如果要使用props達到這個效果就要層層傳遞props碎罚。 下面看看context實現(xiàn)方式
- 簡單使用 (老方法)
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**父組件 */
export default class Parent extends Component {
state = {
msg: 0
}
// 聲明Context屬性
static childContextTypes = {
// 數(shù)字類型
msg: PropTypes.number,
// 方法
method: PropTypes.func
}
// 返回Context對象磅废，約定好方法
getChildContext() {
return {
msg: this.state.msg,
method: () => "返回來的信息"
}
}
render() {
return (
<div onClick={() => this.setState({ msg: this.state.msg + 1 })} >
{/* 子組件 */}
<Child />
{/* 無狀態(tài)子組件 */}
<ChildStateLess />
</div>
);
}
}
/**子組件 */
class Child extends Component {
// 聲明需要使用的Context屬性 必寫 不然聽過this.context.xxx 取出來的值為undefind
static contextTypes = {
msg: PropTypes.number
}
render() {
return (
<div>
{/* 通過props傳遞過來的參數(shù) */}
{this.context.msg}
{/* 孫子組件 */}
<GrandsonComponent />
</div>
)
}
}
/**無狀態(tài)組件 */
const ChildStateLess = (props, context) => {
return (
<div style={{ color: "red" }} >
{context.msg}
</div>
)
}
/**為無狀態(tài)組件聲明需要使用的Context屬性 */
ChildStateLess.contextTypes = {
msg: PropTypes.number
}
/**孫子組件 */
class GrandsonComponent extends Component {
// 聲明需要使用的Context屬性 必寫 不然聽過this.context.xxx 取出來的值為undefind
static contextTypes = {
msg: PropTypes.number
}
render() {
return (
<div style={{ color: "green" }} >
{/* 通過props傳遞過來的參數(shù) */}
{this.context.msg}
</div>
)
}
}
- 使用<React. createContext> Api創(chuàng)建
import React from 'react';
const ExampleContext = React.createContext({
msg: 0,
method: () => "method"
});
此ExampleContext通過React.createContext創(chuàng)建，這個Context對象包含兩個組件荆烈，<Provider />和<Consumer />还蹲。
兩個API代替了getChildContext、childContextTypes、contextTypes這些繁瑣的api谜喊，更符合react的設(shè)計理念。
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const ExampleContext = React.createContext('ExampleContext');
class ExampleProvider extends Component {
state = {
msg: 0
}
render() {
return (
<div onClick={() => {
this.setState({ msg: this.state.msg + 1 })
}} >
<ExampleContext.Provider value={{ msg: this.state.msg, method: () => { } }} >
<Child />
<ChildStateLess />
</ExampleContext.Provider>
</div>
);
}
}
/**子組件 */
class Child extends Component {
render() {
return (
<ExampleContext.Consumer>
{
(context) => (
<div>
{/* 通過props傳遞過來的參數(shù) */}
{context.msg}
{/* 孫子組件 */}
<GrandsonComponent />
</div>
)
}
</ExampleContext.Consumer>
)
}
}
/**無狀態(tài)組件 */
const ChildStateLess = (props, context) => {
return (
<ExampleContext.Consumer>
{
(context) => (
<div style={{ color: "green" }} >
{/* 通過props傳遞過來的參數(shù) */}
{context.msg}
{/* 孫子組件 */}
</div>
)
}
</ExampleContext.Consumer>
)
}
/**為無狀態(tài)組件聲明需要使用的Context屬性 */
ChildStateLess.contextTypes = {
msg: PropTypes.number
}
/**孫子組件 */
class GrandsonComponent extends Component {
render() {
return (
<ExampleContext.Consumer>
{
(context) => (
<div style={{ color: "red" }} >
{/* 通過props傳遞過來的參數(shù) */}
{context.msg}
{/* 孫子組件 */}
</div>
)
}
</ExampleContext.Consumer>
)
}
}
export default ExampleProvider;
- 直接使用context的地方
生命周期：
1.componentWillReceiveProps(nextProps, nextContext)
2.shouldComponentUpdate(nextProps, nextState, nextContext)
3.componetWillUpdate(nextProps, nextState, nextContext)
構(gòu)造函數(shù): constructor(props, context)
web前端倦始、react交流群：879108483
