React——组件 & Props

组件 & Props

1）定义组件的方式：【组件名称必须以大写字母开头！！！】

• 函数声明：编写JavaScript函数，该函数是一个有效的React组件，它接受唯一带有数据的“props”属性对象并返回一个React元素，被称为“函数组件”
• 类声明：使用ES6的class来定义组件
• 二者等效

// 函数组件
function ReactElement1(props) {
  return <h1>hello,{props.name}</h1>
}
// ES6的class来定义
class ReactElement2 extends React.Component{
   render() {
     return <h1>hello,{this.props.name}</h1>
   }
}

2）组件提取：概念类似于Vue的使用，大组件由小组件组成
3）Props的只读性：

• 所有 React 组件都必须像 纯函数 一样保护它们的 props 不被更改。
• 纯函数：不会修改入参，多次调用下相同入参始终返回相同结果