组件
文件:Profile.js
export default function Profile({
isPacked = true,head,stlyeTmp,src,size = 80}) {
if (isPacked) {
head = head + " ✔";
}
return (
<div>
<h1>{
head}</h1>
<img
src={
src}
alt="Katherine Johnson"
width={
size}
style={
stlyeTmp}
/>
</div>
)
}
export function Gallery() {
return ...
}
export
:组件可导出default
:默认导出组件(一个文件中只能有一个默认导出的组件,通常为文件名!)function
:表明这是个组件Profile
:组件名必须以大写字母开头{head,src,size = 80}
:参数(size
默认值80)return
:返回一个JSX标签,单行时省略()
JSX在标签使用{}
嵌入JS表达式
export default function Profile({
isPacked,recipes}) {
return (
<div>
{
isPacked ? (<h1>{
head}</h1>) : (head)}
{
isPacked && 'isPacked为true时才显示'}
{
recipes.map(recipe =>
<div key={
recipe.id}>{
recipe.name}
{
recipe.ings.filter((ing,i) => i > 4)}
</div>
)}
</div>
)
}
{isPacked ? (<h1>{head}</h1>) : (head)}
:三元组运算{isPacked && 'isPacked为true时才显示'}
:逻辑与运算数组.map
(返回一个JSX标签):遍历每个元素(参数a
:a为当前元素;参数(a,b)
:a为当前元素,b为元素下标);每个元素必须有唯一key
数组.filter
:返回条件为true的元素
使用组件
文件:App.js
import Profile from './Profile.js';
import {
Gallery } from './Profile.js';
const baseUrl = 'https://i.imgur.com/MK3eW3Am';
export default function App() {
return (
<section>
<Profile head='标题' src={
baseUrl + '.jpg'} size={
100}
stlyeTmp={
{
backgroundColor: 'black',
color: 'pink'
}}/>
<Gallery />
</section>
);
}
- 组件导入导出
语法 | 导出声明 | 导入声明 |
---|---|---|
默认 | export default function Profile(){} |
import Profile from './Profile.js'; 导入Profile.js 中的默认导出组件 |
命名 | export function Gallery() {} |
import { Gallery } from './Profile.js'; 导入Profile.js 中的非默认的导出组件,必须使用{} |
- 使用组件并传入参数:(
{ backgroundColor: 'black', color: 'pink' }
是一个对象,和100等价)
<Profile head='HHHH' src={
baseUrl + '.jpg'} size={
100}
stlyeTmp={
{
backgroundColor: 'black',
color: 'pink'
}}/>
组件嵌套
- 目标效果
<Card>
<Avatar />
</Card>
<Card>
<Profile />
</Card>
- 实现方式
function Card({
children }) {
return (
<div className="card">
{
children}
</div>
);
}
组件纯粹原则
- 它只管自己的事。 它不应更改渲染前存在的任何对象或变量。
- 相同的输入,相同的输出。 给定相同的输入,组件应该始终返回相同的 JSX。
- 组件的任何输入(变量、属性、状态和上下文)应该是只读的!,不应该直接修改!应使用
set状态
或useEffect
去更改数据!(因为直接修改的代码会因渲染次数、渲染顺序导致不可预测性!) - React 提供了一个 “严格模式”,它在开发过程中两次调用每个组件的函数。 通过两次调用组件函数,严格模式有助于找到违反纯粹原则的组件。通过将根组件封装到 <React.StrictMode> 中实现:
root.render(
<React.StrictMode>
<App /> //根组件
</React.StrictMode>
);