一较剃、父?jìng)髯?/h3>
父組件：
class App extends Component {
render() {
return (
<div>
{/* 類組件 */}
<Child name="李四" age={26} hobbies={['睡覺']} />
{/* 類組件默認(rèn)值 */}
<Child />
{/* 函數(shù)組件 */}
<Child2 />
</div>
)
}
}
類子組件：
class Child extends Component {
render() {
const { name, age, hobbies } = this.props;
return (
<div>
<h3>{`姓名：${name}，年齡：${age}`}</h3>
<h3>愛好：</h3>
<ul>
{
hobbies.map(item => {
return <li key={item}>{item}</li>
})
}
</ul>
</div>
)
}
}
函數(shù)子組件：
function Child2(props) {
const { name, age, hobbies } = props;
return (
<div>
<h3>{`姓名：${name}技健，年齡：${age}`}</h3>
<h3>愛好：</h3>
<ul>
{
hobbies.map(item => {
return <li key={item}>{item}</li>
})
}
</ul>
</div>
)
}
類子組件中設(shè)置默認(rèn)值及類型檢查：
class Child extends Component {
// 類型檢查
static propTypes = {
// isRequired 必傳
name: PropTypes.string.isRequired,
age: PropTypes.number,
hobbies: PropTypes.array
}
// 設(shè)置默認(rèn)值
static defaultProps = {
name: "小明",
age: 18,
hobbies: ['吃飯', '睡覺', '打豆豆']
}
render() {
const { name, age, hobbies } = this.props;
return (
<div>
<h3>{`姓名：${name}，年齡：${age}`}</h3>
<h3>愛好：</h3>
<ul>
{
hobbies.map(item => {
return <li key={item}>{item}</li>
})
}
</ul>
</div>
)
}
}
函數(shù)組件和類組件通用設(shè)置默認(rèn)值及類型檢查：
// 類型檢查
Child2.propTypes = {
// isRequired 必傳
name: PropTypes.string.isRequired,
age: PropTypes.number,
hobbies: PropTypes.array
}
// 設(shè)置默認(rèn)值
Child2.defaultProps = {
name: "小明",
age: 18,
hobbies: ['吃飯', '睡覺', '打豆豆']
}
二惰拱、子傳父
父組件：
class App extends Component {
constructor() {
super();
this.state = {
data: []
}
}
render() {
return (
<div>
<Child getData={this.handleGetData} />
<h2>列表：</h2>
<ul>
{
this.state.data.map(item => {
return <li key={item}>{item}</li>
})
}
</ul>
</div>
)
}
// 定義箭頭函數(shù)接收子組件傳過來(lái)的值
handleGetData = (data) => {
this.setState({
data
})
}
}
子組件：
class Child extends Component {
constructor() {
super();
this.state = {
// 子組件初始值
data: ['a', 'b', 'c']
}
}
render() {
const { getData } = this.props;
return (
// 將子組件的值傳遞到父組件
<button onClick={e => getData(this.state.data)}>獲取數(shù)據(jù)</button>
)
}
}
三雌贱、跨組件通信（context）
Context 提供了一個(gè)無(wú)需為每層組件手動(dòng)添加 props，就能在組件樹間進(jìn)行數(shù)據(jù)傳遞的方法偿短。
父組件：
// 創(chuàng)建 Context 并設(shè)置默認(rèn)值
const listContext = React.createContext([111, 222, 333])
// 父組件
class App extends Component {
constructor() {
super();
this.state = {
list: ['aaa', 'bbb', 'ccc']
}
}
render() {
return (
<div>
<div>我是父組件</div>
{/* 調(diào)用 Provider 組件發(fā)送數(shù)據(jù) */}
<listContext.Provider value={this.state}>
<Child />
</listContext.Provider>
</div>
)
}
}
子組件：
class Child extends Component {
render() {
return (
<div>
<div>我是子組件</div>
<GrandSon />
</div>
)
}
}
孫子組件（類）：
class GrandSon extends Component {
// 接收 Context
static contextType = listContext;
constructor() {
super();
this.state = {};
}
render() {
return (
<div>
<div>我是孫子組件</div>
<ul>
{
this.context.list.map(item => {
return <li key={item}>{item}</li>
})
}
</ul>
</div>
)
}
}
- 通過類組件里定義
static contextType接收父組件傳遞過來(lái)的 Context 值欣孤。**
// 接收父組件傳遞過來(lái)的 Context 值
static contextType = listContext;
- 通過組件名調(diào)用 ContextType 接收父組件傳遞過來(lái)的 Context 值。
// 通過類名接收父組件傳遞過來(lái)的 Context 值
GrandSon.contextType = listContext;
孫子組件（函數(shù)）：
function GrandSon() {
return (
<div>
<div>我是孫子組件</div>
<ul>
{/* 通過 Consumer 組件接收數(shù)據(jù) */}
<listContext.Consumer>
{
value => {
return value.list.map(item => {
return <li key={item}>{item}</li>
})
}
}
</listContext.Consumer>
</ul>
</div>
)
}
四昔逗、兄弟組件通信（events）
import React, { PureComponent } from 'react';
import { EventEmitter } from 'events';
// 定義事件總線
const eventsBus = new EventEmitter();
// 子組件1
class Child1 extends PureComponent {
constructor(props) {
super(props);
this.state = {
message: ''
}
}
// 監(jiān)聽事件總線獲取的值
componentDidMount() {
eventsBus.addListener('sayHello', this.handleSayHelloListener.bind(this))
}
handleSayHelloListener(message) {
this.setState({
message
})
}
// 銷毀監(jiān)聽事件
componentWillUnmount() {
eventsBus.removeListener('sayHello', this.handleSayHelloListener);
}
render() {
return (
<div>
子組件1
<h2>子組件2的消息：</h2>
{this.state.message}
</div>
)
}
}
// 子組件2
class Child2 extends PureComponent {
render() {
return (
<div>
子組件2
<button onClick={() => this.sendMsg()}>發(fā)送消息</button>
</div>
)
}
// 從子組件 2 發(fā)送消息至子組件 1
sendMsg() {
eventsBus.emit('sayHello', '你好降传，我是子組件2', 666)
}
}
class App extends PureComponent {
render() {
return (
<div>
<Child1 />
<Child2 />
</div>
);
}
}
export default App;
