目录
- 组件
- JSX在标签使用`{}`嵌入JS表达式
- 使用组件
- 组件嵌套
- 以🌲树的方式管理组件间的关系
- 组件纯粹原则
组件
文件：Profile.js
export default function Profile({isPacked = true，head,stlyeTmp,src,size = 80}) {if (isPacked) {head = head + " ✔";}return (<><h1>{head}</h1><imgsrc={src}alt="Katherine Johnson"width={size}style={stlyeTmp}/></>)
}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>
);
