React 组件&Props

React学习：组件 & Props

组件从概念上类似于 JavaScript 函数。它接受任意的入参（即 props），并返回用于描述页面展示内容的 React 元素。

01 函数组件

下面的函数是一个有效的 React 组件，因为它接收唯一带有数据的props对象与并返回一个React元素。这类组件被称为函数组件，因为它本质上就是 JavaScript 函数。

// 函数组件
function Welcome(props) {
     
  return <h1>Hello, {
     props.name}</h1>;
}

// 推荐使用箭头函数
const Welcome = (props) => {
     
  return <h1>Hello, {
     props.name}</h1>;
};

02 class 组件

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

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

03 渲染组件

• 之前看到的 React 元素都只是 DOM 标签，不过 React 元素也可以是用户自定义的组件。当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为props。
• 组件可以在其输出中引用其他组件，即就能用同一组件来抽象出任意层次的细节。按钮，表单，对话框，甚至整个屏幕的内容：在 React 应用程序中，这些通常都会以组件的形式表示。

单个组件

// 定义函数组件
const Welcome = (props) => {
     
  return <h1>Hello, {
     props.personName}</h1>;
};

// 使用函数组件
const element = <Welcome personName='Sara' />;

// 渲染组件
ReactDOM.render(element, document.getElementById('root'));

组合组件

// 定义函数组件
const personCard = (props) => {
     
  // 将 传递的数据 解构出来
  const {
     info} = props;
  return (
    <div>
      <h1>Hello, {
     info.personName}</h1>
      <p>{
     info.age}</p>
      <span>{
     info.hobby}</span>
      <img src={
     info.personImg}>
    </div>
  );
};

// 使用函数组件
const infoList = [
  {
     personName:'Peppa',age:18,hobby:'reading',personImg:'/peppa.png'},
  {
     personName:'George',age:20,hobby:'sing',personImg:'/george.png'},
  {
     personName:'Sara',age:12,hobby:'dancing',personImg:'/sara.png'},
]

const element = (
  <>
    <personCard info={
     infoList[0]} />
    <personCard info={
     infoList[1]} />
    <personCard info={
     infoList[2]} />
  </>
);

// 渲染组件
ReactDOM.render(element, document.getElementById('root'));

04 Props 的只读性

• 组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。
• 应用程序的 UI 是动态的，并会伴随着时间的推移而变化，所以可以用新定义的变量来接收 props 里的数据，去修改这个新变量。
• 或者使用state,在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出内容。