react文档阅读
This commit is contained in:
224
react/react文档.md
Normal file
224
react/react文档.md
Normal file
@@ -0,0 +1,224 @@
|
||||
# 快速入门
|
||||
## 创建和嵌套组件
|
||||
React应用由组件组成，每个组件都是UI的一部分，组件拥有自己的外观和逻辑。
|
||||
### 组件是返回标签的js函数
|
||||
```js
|
||||
function MyButton() {
|
||||
return (
|
||||
<button>I'm a button</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
上述已经声明了MyButton组件，可以将该组件嵌套到另一个组件中
|
||||
```js
|
||||
export default function MyApp() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Welcome to my app</h1>
|
||||
<MyButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
> react组件必须以大写字母开头，而html组件则是必须以小写字母开头，可以通过组件开头字母的大小写来区分html组件和react组件
|
||||
|
||||
## jsx编写标签
|
||||
上述返回标签的语法被称为jsx，大多数react项目都支持jsx。
|
||||
jsx比html更加严格:
|
||||
1. 所有的标签都要有闭合标签（例如`<br/>`)
|
||||
2. 组件不能返回多个标签，只能返回一个标签，如果存在多个，必须将其包含到一个公共的父级`<div>`或`<>`中
|
||||
```js
|
||||
function AboutPage() {
|
||||
return (
|
||||
<>
|
||||
<h1>About</h1>
|
||||
<p>Hello there.<br />How do you do?</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 添加样式
|
||||
React中，可以在标签中添加`className`属性来添加样式，其和html中的`class`工作方式相同
|
||||
```html
|
||||
<img className="avatar" />
|
||||
```
|
||||
```css
|
||||
/* In your CSS */
|
||||
.avatar {
|
||||
border-radius: 50%;
|
||||
}
|
||||
```
|
||||
## 显示数据
|
||||
在jsx中，标签位于js中，而可以在标签内通过`{}`来计算js表达式并将其填充到标签中
|
||||
```js
|
||||
return (
|
||||
<h1>
|
||||
{user.name}
|
||||
</h1>
|
||||
);
|
||||
```
|
||||
jsx还可以将表达式的值传递给标签属性，通过`{}`传递表达式的值
|
||||
```js
|
||||
return (
|
||||
<img
|
||||
className="avatar"
|
||||
src={user.imageUrl}
|
||||
/>
|
||||
);
|
||||
```
|
||||
同时，可以通过js表达式来复制css
|
||||
```js
|
||||
const user = {
|
||||
name: 'Hedy Lamarr',
|
||||
imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
|
||||
imageSize: 90,
|
||||
};
|
||||
|
||||
export default function Profile() {
|
||||
return (
|
||||
<>
|
||||
<h1>{user.name}</h1>
|
||||
<img
|
||||
className="avatar"
|
||||
src={user.imageUrl}
|
||||
alt={'Photo of ' + user.name}
|
||||
style={{
|
||||
width: user.imageSize,
|
||||
height: user.imageSize
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
## 条件渲染
|
||||
在React中，没有特殊语法编写条件，故而可以在js中通过if条件引入jsx：
|
||||
```js
|
||||
let content;
|
||||
if (isLoggedIn) {
|
||||
content = <AdminPanel />;
|
||||
} else {
|
||||
content = <LoginForm />;
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
{content}
|
||||
</div>
|
||||
);
|
||||
```
|
||||
也可以使用如下方式：
|
||||
```js
|
||||
<div>
|
||||
{isLoggedIn ? (
|
||||
<AdminPanel />
|
||||
) : (
|
||||
<LoginForm />
|
||||
)}
|
||||
</div>
|
||||
```
|
||||
## 渲染列表
|
||||
可以通过如下方式将js数组渲染为列表
|
||||
```js
|
||||
const products = [
|
||||
{ title: 'Cabbage', id: 1 },
|
||||
{ title: 'Garlic', id: 2 },
|
||||
{ title: 'Apple', id: 3 },
|
||||
];
|
||||
const listItems = products.map(product =>
|
||||
<li key={product.id}>
|
||||
{product.title}
|
||||
</li>
|
||||
);
|
||||
|
||||
return (
|
||||
<ul>{listItems}</ul>
|
||||
);
|
||||
```
|
||||
上述示例中，`<li>`有一个key属性，对于列表中的每个属性，都应该传递给其一个字符串或数字的key，用于在兄弟节点之间唯一标识该元素。
|
||||
|
||||
## 响应事件
|
||||
可以在组件中声明事件处理函数来响应事件
|
||||
```js
|
||||
function MyButton() {
|
||||
function handleClick() {
|
||||
alert('You clicked me!');
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={handleClick}>
|
||||
Click me
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
## 更新界面
|
||||
如果希望组件维护状态信息，可以通过导入useState来完成
|
||||
```js
|
||||
import { useState } from 'react';
|
||||
|
||||
function MyButton() {
|
||||
const [count, setCount] = useState(0);
|
||||
```
|
||||
其中，count记录当前的状态，而setCount则是用于改变状态的函数，可以为数组中变量取任何名称。
|
||||
```js
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function MyApp() {
|
||||
return (
|
||||
<div>
|
||||
<h1>Counters that update separately</h1>
|
||||
<MyButton />
|
||||
<MyButton />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MyButton() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
function handleClick() {
|
||||
setCount(count + 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<button onClick={handleClick}>
|
||||
Clicked {count} times
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
## 使用hook
|
||||
以`use`开头的函数被称为hook，useState是react提供的一个内置hook。
|
||||
hook比普通函数更为严格，只能在组件顶层或其他hook的顶层调用hook。如果想要在条件或循环中使用hook，请新建一个组件并在组件内部使用。
|
||||
## 组件之间共享数据
|
||||
如果想要将状态在多个组件之间共享，需要将状态提升存储到最近的公共父组件中
|
||||
```js
|
||||
export default function MyApp() {
|
||||
const [count, setCount] = useState(0);
|
||||
|
||||
function handleClick() {
|
||||
setCount(count + 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Counters that update together</h1>
|
||||
<MyButton count={count} onClick={handleClick} />
|
||||
<MyButton count={count} onClick={handleClick} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MyButton({ count, onClick }) {
|
||||
return (
|
||||
<button onClick={onClick}>
|
||||
Clicked {count} times
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
此时，由MyApp传递给MyButton的值称之为prop
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user