组件
React 官方文档对组件的描述：React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。官方文档地址：https://zh-hans.react.dev/
如何创建一个组件：通过JavaScript函数返回标签来创建
function Button1() { return ( <button>Button</button> )}
复制代码
创建嵌套的组件
function Button() { return ( <div> <button>Button</button> </div> )}function App() { return ( <> <h1>Hello React</h1> <Button /> </> )}export default App
复制代码
以上的这种(通过JavaScript函数返回标签)语法是 JSX，大多数 React 项目会使用 JSX，组件的首字母必须以大写开头，HTML 标签全是小写字母，这样也便于区分是 React 组件还是 HTML 标签。你的组件不能返回多个 JSX 标签，可以使用一个共享的父级<div>...<div>或者空的<>...</>将它们包裹起来即可
为组件添加样式
通过 className 为组件指定一个样式，与 HTML 的 class 工作方式相同
function Button() { return ( <div> <button className="button1">Button</button> </div> )}// 样式.button1 { background-color: #646cff; color: #fff;}
复制代码
为组件添加事件 onClick
通过 onClick 为组件添加一个事件处理函数
function handleClick() { alert('hello react') }function Button({count, onClick}) { return ( <div> <button className="button1" onClick={handleClick}>Button</button> </div> )}// 样式.button1 { background-color: #646cff; color: #fff;}
复制代码
在组件中访问 JavaScript 变量
在组件中你可以访问 JavaScript 变量，通过大括号{}来访问变量例如obj.name
const obj = { name: '按钮', size: '100px'}function Button({count, onClick}) { return ( <div> <button className="button1" style={{ width: obj.size }}>{obj.name}</button> </div> )}
复制代码
条件渲染
就像编写普通JavaScript代码if语句一样来对组件进行条件渲染
function Button() { return ( <div> <button className="button">Button</button> </div> )}function Button1() { return ( <div> <button className="button1">Button1</button> </div> )}const content = falsefunction App() { return ( <> <h1>Hello React</h1> { content ? (<Button />) : (<Button1 />) } </> )}
复制代码
useState 状态
有时候我们可能需要组件记住某个状态，比如一个按钮被点击的次数，想做到这一点可以在你的组件使用useState。
先从 React 中引入useState并在组件中声明一个 state 变量，count为当前的值，setCount用来操作 count 的函数。count初始值为 0，当点击按钮后调用setCount将 count 的值加 1，这个 count 的值随着按钮的点击会不断的增加
import { useState } from 'react'const obj = { name: '按钮', size: '100px'}function Button1() { const [count, setCount] = useState(0) function handleClick() { setCount(count + 1) } return ( <button className="button2" onClick={handleClick} style={{ width: obj.size }}>{obj.name}2</button> )}
复制代码
组件间共享数据 状态提升
有没有可能两个组件共享一个状态呢？比如有两个按钮点击其中一个按钮另一个的值也会实时更新。这就需要用到状态提升，其实就是类似于 vue 中父子组件之间传值，在 React 中这种传递信息的方式叫做prop，由父组件将state的值和事件处理函数handleClick传递给子组件，再由子组件去执行事件并更新state的值
function Button({count, onClick}) { return ( <div> <button className="button1" onClick={onClick} style={{ width: obj.size }}>{obj.name}: {count}</button> </div> )}function App() { const [count, setCount] = useState(0) function handleClick() { setCount(count + 1) } return ( <> <h1>Hello World</h1> <div className='card'> <button onClick={handleClick}>count is {count}</button> </div> { content ? (<Button count={count} onClick={handleClick} />) : (<Button1 />) } <Button onclick={handleClick} count={count} /> </> )}
复制代码
评论