2 Reac进阶

一 组件props

作用：给组件传递数据，是React组件通讯的基础

使用步骤：

1、传递props：在组件标签上添加属性

2、接收props：通过参数拿到

推荐：使用解构，接收props

二 父子组件通讯

原则：谁的数据谁负责

1、父=》子 （传递props）

父组件提供数据，通过props传递给子组件使用

2、子=》父

a、父组件准备修改数据的函数，传递给子组件

b、子组件调用函数，将数据作为参数回传给父组件

 三 兄弟组件通讯

1、找到父组件，提供共享数据

2、使用数据，例如聊天工具左边好友列表，右边聊天窗口，展示好友名称（父到子通讯）

3、修改数据，切换选中好友（子到父通讯）

状态提升：如果两个兄弟组件要通讯，就把共享数据提升到公共父组件中

import classNames from 'classnames'
import { useState } from 'react'
import './App.scss'

// 兄弟组件通讯

// 左侧 好友列表组件
const Friends = ({ friends, onSelect, chatFriend }) => {
  return (
    <div className="friends">
      {friends.map(item => {
        return (
          <div
            key={item.id}
            className={classNames(
              'friend',
              item.id === chatFriend.id && 'selected'
            )}
            onClick={() => onSelect(item)}
          >
            <img src={item.avatar} className="avatar" alt="" />
            <div className="info">
              <div className="row">
                <div className="name">{item.name}</div>
                <div className="date">{item.dateStr}</div>
              </div>
              <div className="msg">{item.message}</div>
            </div>
          </div>
        )
      })}
    </div>
  )
}

// 右侧 聊天窗口组件
const Chat = ({ friend }) => {
  return (
    <div className="chat-wrapper">
      <div className="header">{friend.name}</div>
      <div className="list"></div>
      <div className="input"></div>
    </div>
  )
}

// 好友列表数据
const defaultFriends = [
  {
    id: '13258165',
    name: '周杰伦',
    avatar:
      'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/zhoujielun.jpeg',
    dateStr: '刚刚',
    message: '哎呦，不错哦',
  },
  {
    id: '36080105',
    name: '许嵩',
    avatar:
      'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/reactbase/comment/xusong.jpeg',
    dateStr: '01/05',
    message: '[语音]',
  },
]
// 父组件
const App = () => {
  const [friends, setFriends] = useState(defaultFriends)

  // 1. 找到父组件，提供要共享的数据
  const [chatFriend, setChatFriend] = useState(friends[0])

  const onSelectFriend = friend => {
    setChatFriend(friend)
  }

  return (
    <div className="app">
      {/* 好友列表 */}
      {/* 3. 通过子到父通讯，来修改选中的好友 */}
      <Friends
        friends={friends}
        onSelect={onSelectFriend}
        chatFriend={chatFriend}
      />
      {/* 聊天窗口 */}
      {/* 2. 通过父到子通讯，来展示好友名称 */}
      <Chat friend={chatFriend} />
    </div>
  )
}

export default App

四 后代关系组件通讯

Context（上下文）：范围，无视组件层级关系，跨组件通讯

1、创建Context对象

2、划定范围，提供共享数据

3、范围内的组件，获取共享数据