概念

组件，从概念上类似于Javascript函数。它接受任意的入参（即”props”），并返回用于描述页面展示内容的React元素。
组件包括了函数组件和class组件。
1.定义组件最简单的方式就是编写JavaScript 函数,该函数是一个有效的React组件，因为它接受唯一带有数据的”props”(代表属性)对象与并返回一个React 元素。这类组件称为”函数组件”，因为它本质上就是JavaScript函数。

function Welcome(props){
  return <h1>Hello,{props.name}</h1>
}

你同时还可以使用ES6的class 来定义组件

class Welcome extends React.Component {
  render(){
    return <h1>Hello,{this.props.name}<h1>
  }
}

当React元素为用户自定义组件时，它会将JSX所接受的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称为”props”.
下面这个例子：
1.我们调用了ReactDOM.render()函数，并传入作为参数
2.React调用Welcome组件，并将{name:’Sara’}作为props传入。
3.Welcome组件将

Hello,Sata

元素作为返回值。
4.React DOM将DOM高效的更新为

Hello,Sara

注意：组件名称必须以大写字母开头
React 会将以小写字母开头的组件视为原生的DOM标签。例如

代表HTML的div标签，而则代表一个组件，并且需在作用域内使用Welcome.

function Welcome(props){
  return <h1>Hello,{props.name}</h1>
}
const element =<Welcome name='sara' />
ReactDOM.render(element,document.getElementById('root'))

========================================================================

组合 VS 继承

有些组件无法提前知晓他们子组件的具体内容，在Sidebar（侧边栏）和Dialog（对话框）等展现通用容器的组件中特别容易遇到这种情况。
建议这些组件使用一个特殊的children prop来将他们的子组件传递到渲染结果中：
JSX 标签中的所有内容都会作为一个children prop传递给FancyBorder 组件。因为FancyBorder将{props.children} 渲染在一个

中，被传递的这些子组件最终都会出现在输出结果中。

function FancyBorder(props){
  return (<div className ={'a a-'+props.color}> {props.children}</div>)
}
//这使得别的组件通过JSX嵌套，将任意组件作为子组件传递给他们。
function WelcomeDialog(){
  return <FancyBorder color='blue'>
     <h1> Welcome</h1>
     <p> Thank you for visiting our spacecraft!</p>
    </FancyBorder>
}
ReactDOM.render(<WelcomeDialog />,document.getElementById('root'))

少数情况下，你可能需要在一个组件中预留几个洞。这种情况下，我们可以不使用children，而是自行约定：将所需内容传入props，并使用响应的prop
和之类的React 元素本质就是对象（object），所以你可以把他们当作props，像其他数据一样传递。这种方法可能使你想起别的库中”槽（slot）”的概念，但在React 中没有“槽”这一概念的限制，你可以将任何东西作为 props 进行传递。

function SplitPane(props){
  return (
  <div className="SplitPane">
    <div>{props.left}</div>
    <div>{props.right}</div>
    </div>
  )
}
function App(){
  return (
  <SplitPane left ={<Contacts />} right={<Chat />}
  )
}

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
    </FancyBorder>
  );
}
function WelcomeDialog() {
  return (
    <Dialog
      title="Welcome"
      message="Thank you for visiting our spacecraft!" />
  );
}
ReactDOM.render(
  <WelcomeDialog />,
  document.getElementById('root')
);

学习笔记

组件 & Props

概念

Hello,Sata

Hello,Sara

组合 VS 继承