React快速入门之组件

组件

文件：Profile.js

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表达式

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>
);