React组件及组件通讯

组件使用

• index.js

import { createRoot } from 'react-dom/client';
import App from './App';
const root = createRoot(document.querySelector('#root'))
root.render(<App />)

• App.js

import Header from './commponts/Header/index'
const App = () => {
  return <div>
    <Header />
    <p>12</p>
  </div>
}
export default App

• Header.js

const Header = () => {
  return <h1>header</h1>
}
export default Header

组件状态state

• react也是数据驱动视图的，使用状态useState()函数实现

import { useState } from "react"


const App = () => {
  let [count, setCount] = useState(10)

  return <div>
    count:{count}
    <button onClick={() => setCount(count + 1)}>count+1</button>

  </div>
}
export default App

• 修改状态
  规则：不直接修改当前状态的值，应该创建新值，否则会报错货组件无法重新渲染

import { useState } from "react"


const App = () => {
  const [count, setCount] = useState(10)
  const [list, setList] = useState(['apple'])
  const [user, setUser] = useState({ name: 'lisa' })


  return <div>
    <h1>count:{count}</h1>
    <button onClick={() => setCount(count + 1)}>count+1</button>
    <hr></hr>
    <h1> 数组:{list.join()}</h1>
    <button onClick={() => setList([...list, 'orange'])}>新增</button>
    <button onClick={() => setList(list.map(item => {
      if (item === 'apple') {
        return '苹果'
      }
      return item
    }))}>修改</button>
    <button onClick={() => setList(list.filter(item => item !== 'apple'))}>删除</button>
    <hr></hr>

    <h1> 对象:{user.name}</h1>
    <button onClick={() => setUser({ ...user, name: 'tom' })}>修改</button>


  </div>
}
export default App

组件通讯

• 父传子

// 方法一：子组件通过props接收
const Children = props => {
  // 注意：props是只读的
  return (
    <div>
      <img src={props.imgURl} />
    </div>
  )
}

// 方法二：子组件通过解构props接收，可以给参数设置默认值
const Children2 = ({ imgURl, size = 50 }) => {
  // 注意：props是只读的
  return (
    <div>
      <img src={imgURl} size={size} />
    </div>
  )
}

const App = () => {
  return (
    <div>
      <Children imgURl='http:www.baidu.com.pic'></Children>
      <Children2 imgURl='http:www.baidu.com.pic'></Children2>
    </div>
  )
}

• 子传父
  1、父组件准备修改状态的函数，并传递给子组件
  2、子组件调用函数，并回传数据

const Children = ({ id, name, handleParams }) => {
  return (
    <div id={id} onClick={handleParams(id)} >{name}</div>
  )
}

const App = () => {
  const handleParams = (id) => {
    console.log(id);
  }
  const arr = [{ id: 1, name: 1 }, { id: 2, name: 2 }]
  {
    arr.map(item => {
      return (
        <div>
          <Children key={item.id} id={item.id} name={item.name} handleParams={handleParams}></Children>
        </div >
      )
    })
  }
}

• 非父子组件----兄弟组件
  使用props，通过父组件来互相传递值

• 非父子组件----后代组件，通过context(上下文)实现，步骤如下：

1、创建共享数据
const ThemeContext = createContext()
2、划定范围，提供共享数据
<ThemeContext.Provider value="要去共享的数据">
	父组件
</ThemeContext.Provider>
3、范围内的组件，获取共享数据
const 要去共享的数据 = useContext(ThemeContext)