网站建设方投资成本北京百度快速优化排名
组件 & Props
- React 组件
- 函数（ Function ）组件
- 类（ Class ）组件
- Props
- 将 props 传递给子组件
- 在子组件中读取 props
- 给 prop 指定一个默认值
- 使用 JSX 展开语法传递 props
React 组件
组件本质上就是类和函数，但是与常规的类和函数不同的是，组件承载了渲染视图的 UI 和更新视图的 setState 、useState 等方法。React 在底层逻辑上会像正常实例化类和正常执行函数那样处理的组件。
因此，函数与类上的特性在 React 组件上同样具有，比如原型链，继承，静态属性等，所以不要把 React 组件和类与函数独立开来。
函数（ Function ）组件
接收唯一带有数据的 props 对象与并返回一个 React 元素
函数式组件定义时首字母必须大写
render渲染时必须使用标签
function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element);
类（ Class ）组件
类组件必须继承React.Component
必须写render函数
必须有返回值
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}</h1>;}
}
Props
React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。
将 props 传递给子组件
export default function Profile() {return (<Avatarperson={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}size={100}/>);
}
在子组件中读取 props
function Avatar({ person, size }) {// 在这里 person 和 size 是可访问的
}
给 prop 指定一个默认值
function Avatar({ person, size = 100 }) {// ...
}
使用 JSX 展开语法传递 props
有时候，传递 props 会变得非常重复：
function Profile({ person, size, isSepia, thickBorder }) {return (<div className="card"><Avatarperson={person}size={size}isSepia={isSepia}thickBorder={thickBorder}/></div>);
}
重复代码没有错（它可以更清晰）。但有时你可能会重视简洁。一些组件将它们所有的 props 转发给子组件，正如 Profile 转给 Avatar 那样。因为这些组件不直接使用他们本身的任何 props，所以使用更简洁的“展开”语法是有意义的：
function Profile(props) {return (<div className="card"><Avatar {...props} /></div>);
}
这会将 Profile 的所有 props 转发到 Avatar，而不列出每个名字。