react学习笔记二--面向组件编程一（组件的概念、使用及三大属性）

面向组件编程

react元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。
一个元素就像电影的单帧：它代表了某个特定时刻的 UI。
更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()

data-reactroot 表明当前元素是 该组件的顶层标签

react组件概念理解

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

• 自定义的标签: 组件类(函数)/标签
• 组件名称必须以大写字母开头。
• React 会将以小写字母开头的组件视为原生 DOM 标签

组件定义方式：

1.定义组件最简单的方式就是编写 JavaScript 函数：
（简单组件）

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

该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。
这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

2.还可以使用 ES6 的 class 来定义组件：
(复杂组件）

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

这两个组件在 React 里是等效的

渲染组件：

ReactDOM.render(<MyComponent />, document.getElementById('example1'))

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

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

注意

1. 组件名必须首字母大写
2. 虚拟 DOM 元素只能有一个根元素
3. 虚拟 DOM 元素必须有结束标签

render()渲染组件标签的基本流程

1. React 内部会创建组件实例对象
2. 得到包含的虚拟 DOM 并解析为真实 DOM
3. 插入到指定的页面元素内部

组件三大属性 1: state

1. 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示
2. 初始化指定:

 constructor() {
   
      super()
      this.state = {
   
        stateName1 : stateValue1,
        stateName2 : stateValue2
      }
    }
<