组件使用
- 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)