有兴趣的小伙伴可以加Q群 879108483 互相学习
1.使用props传值
具体实现
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 {
// 默认的props 可写可不写
static defaultProps = {
msg: 1
}
render() {
return (
<div>
{/* 通过props传递过来的参数 */}
{this.props.msg}
</div>
)
}
}
2.使用context (上下文)
Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议在稳定版的App中使用Context。实际上很多优秀的组件都是通过context来实现的，比如antd的主题样式。用好context可以使项目更灵活。
Context 不仅仅适用于父传子，还可以用来作为跨级传递数据，比如父组件传孙子组件。如果要使用props达到这个效果就要层层传递props。 下面看看context实现方式
- 简单使用 (老方法)
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**父组件 */
export default class Parent extends Component {
state = {
msg: 0
}
// 声明Context属性
static childContextTypes = {
// 数字类型
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 />
{/* 无状态子组件 */}
<ChildStateLess />
</div>
);
}
}
/**子组件 */
class Child extends Component {
// 声明需要使用的Context属性 必写 不然听过this.context.xxx 取出来的值为undefind
static contextTypes = {
msg: PropTypes.number
}
render() {
return (
<div>
{/* 通过props传递过来的参数 */}
{this.context.msg}
{/* 孙子组件 */}
<GrandsonComponent />
</div>
)
}
}
/**无状态组件 */
const ChildStateLess = (props, context) => {
return (
<div style={{ color: "red" }} >
{context.msg}
</div>
)
}
/**为无状态组件声明需要使用的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传递过来的参数 */}
{this.context.msg}
</div>
)
}
}
- 使用<React. createContext> Api创建
import React from 'react';
const ExampleContext = React.createContext({
msg: 0,
method: () => "method"
});
此ExampleContext通过React.createContext创建，这个Context对象包含两个组件，<Provider />和<Consumer />。
两个API代替了getChildContext、childContextTypes、contextTypes这些繁琐的api，更符合react的设计理念。
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传递过来的参数 */}
{context.msg}
{/* 孙子组件 */}
<GrandsonComponent />
</div>
)
}
</ExampleContext.Consumer>
)
}
}
/**无状态组件 */
const ChildStateLess = (props, context) => {
return (
<ExampleContext.Consumer>
{
(context) => (
<div style={{ color: "green" }} >
{/* 通过props传递过来的参数 */}
{context.msg}
{/* 孙子组件 */}
</div>
)
}
</ExampleContext.Consumer>
)
}
/**为无状态组件声明需要使用的Context属性 */
ChildStateLess.contextTypes = {
msg: PropTypes.number
}
/**孙子组件 */
class GrandsonComponent extends Component {
render() {
return (
<ExampleContext.Consumer>
{
(context) => (
<div style={{ color: "red" }} >
{/* 通过props传递过来的参数 */}
{context.msg}
{/* 孙子组件 */}
</div>
)
}
</ExampleContext.Consumer>
)
}
}
export default ExampleProvider;
- 直接使用context的地方
生命周期：
1.componentWillReceiveProps(nextProps, nextContext)
2.shouldComponentUpdate(nextProps, nextState, nextContext)
3.componetWillUpdate(nextProps, nextState, nextContext)
构造函数: constructor(props, context)
web前端、react交流群：879108483
网友评论