react 初探：react组件和属性

版权声明：本文为博主原创文章，未经博主允许不得转载。 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 组件的时候，其内部会进行多次的渲染。从而实现了通过不同的组件来实现一个效果。

警告：
组件必须返回一个单独的根元素。这就是为什么我们添加一个

来包含所有 元素的原因。