组件使用

• 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)