summary

[HuangHongRui]

当 React 遇到 用户自定义的组件时， 会把JSX带有的属性作为单个对象传给组件，这个对象就是Props。

//   name : 'Sara'
ReactDOM.render(
  <Welcome name="Sara" />,
  document.getElementById('root')
);

[HuangHongRui]

组合组件 组件可在输出中引用其它组件， 这就可让我用同一组件来抽象出任意层次的细节。 (在React应用中，按钮、表单、对话框、整个屏幕的内容等，这些通常都被表示为组件。)

function Name(props){
    return <h1>Im { props.name }</h1>
}
function Say(props){
    return (
        <div>
        <h1>Hi, { props.something }</h1>
        <Name name='Rui' />
        </div>
    )
}
render (
    <Say something="How are you" />,
    node
)

[HuangHongRui]

function sum(a, b) {
  return a + b;
}

类似这种函数称为“纯函数”， 它没改变它自己的输入值， 当传入的值相同时， 总是会返回相同的结果。

与之相对的是非纯函数，会改变它自身的输入值

[HuangHongRui]

children 属性 可将子元素直接传到输出显示。 有了props.children 才会使下面组件中包含的子元素被渲染显示.

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}                            //
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">                //
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>                                                          //
    </FancyBorder>
  );
}