React 基础 - 02 （组件 – 函数方式，函数组件传参）

React定义组件的方式：

        函数组件  rfc     react function component

        类组件  rcc       react class component

1、函数组件：

        利用函数的封装性、复用性，实现组件的复用，函数名称要求大驼峰

        JSX语法中书写JS代码，需要通过{ }包裹，注释也需要{ }包裹

function Hello() {
   return <h2>hello 组件</h2>;
}

let vNode = Hello();

//复用：JSX语法中书写JS代码，需要通过{}包裹，注释也需要{}包裹
vNode = (
   <div>
      {/*这是注释*/}
      {Hello()}
      {Hello()}
      {2 + 3}
   </div>
);

//语法糖，标签调用
vNode = <Hello />;
vNode = (
   <div>
      <Hello />
       <Hello />
   </div>
);
ReactDOM.render(vNode, document.getElementById("root"));

2、函数组件传参

        函数传参的方式，改变组件内部的数据 props

function HelloName(props) {
  return (
    <h3>
      Hello,{props.name},{props.age}
    </h3>
  );
}

//调用传参
let vNode = HelloName({ name: "react" });

//语法糖
vNode = <HelloName name="Tom" />;

//复用
vNode = (
    <div>
        <HelloName name="react" age="18" />
        <HelloName name="uniapp" age="5" />
        {HelloName({ name: "vue" })}
        {HelloName({ name: "html" })}
    </div>
);
ReactDOM.render(vNode, document.getElementById("root"));