React快速入门之组件

组件

文件：Profile.js

javascript 复制代码

export default function Profile({isPacked = true，head,stlyeTmp,src,size = 80}) {
	if (isPacked) {
  		head = head + " ✔";
	}
  return (
  	<>
  		<h1>{head}</h1>
  		
  		<img
      		src={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表达式

javascript 复制代码

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

javascript 复制代码

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等价）

javascript 复制代码

<Profile head='HHHH' src={baseUrl + '.jpg'} size={100}
      			stlyeTmp={{
      				backgroundColor: 'black',
      				color: 'pink'
    			}}/>

组件嵌套

目标效果

javascript 复制代码

<Card>
  <Avatar />
</Card>

<Card>
  <Profile />
</Card>

实现方式

javascript 复制代码

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

以🌲树的方式管理组件间的关系

组件纯粹原则

它只管自己的事。它不应更改渲染前存在的任何对象或变量。
相同的输入，相同的输出。给定相同的输入，组件应该始终返回相同的 JSX。
组件的任何输入 （变量、属性、状态和上下文）应该是只读的！ ，不应该直接修改！应使用set状态或useEffect去更改数据！（因为直接修改的代码会因渲染次数、渲染顺序导致不可预测性！）
React 提供了一个 "严格模式"，它在开发过程中两次调用每个组件的函数。通过两次调用组件函数，严格模式有助于找到违反纯粹原则的组件。通过将根组件封装到 <React.StrictMode> 中实现：

javascript 复制代码

root.render(
  <React.StrictMode>
    <App /> //根组件
  </React.StrictMode>
);

React快速入门之组件

目录

组件

JSX在标签使用{}嵌入JS表达式

使用组件

组件嵌套

以🌲树的方式管理组件间的关系

组件纯粹原则

JSX在标签使用`{}`嵌入JS表达式