React快速入门之组件

组件

文件：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>
);