版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_27603235/article/details/79320995
react 的设计方式采用了组件化的方式,将UI 分割成一个个组件便于更好的实现和重复利用。
组件分为函数式组件和类组件,函数式组件主要用来做为页面渲染使用(仅仅作为页面渲染,不附带其他初始化功能)
函数式组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
Welcome 作为一个函数组件的名称,引用时必须大小写相等, 代码中将 name =“Sara” 作为组件的属性传递给Welcome,在Welcome中能够获得属性。
构成组件
组件可以在它们的输出中引用其它组件。这使得我们可以使用同样的组件来抽象到任意层级。一个按钮,一个表单,一个对话框,一个屏幕:在 React 应用中,所有这些都通常描述为组件。
例如,我们可以创建一个 App 组件,并在其内部多次渲染 Welcome:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
渲染结果如下图:
在调用APP 组件的时候,其内部会进行多次的渲染。从而实现了通过不同的组件来实现一个效果。
警告:
组件必须返回一个单独的根元素。这就是为什么我们添加一个
来包含所有 元素的原因。
扫描二维码关注公众号,回复:
4395382 查看本文章