组件 & 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,而不列出每个名字。