react组件复习整理

「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」

定义:

组件是将 UI 拆分为独立的可重用的部分。和 JavaScript 函数类似，组件接收名为 props 的输入并返回 React 元素，它声明用户界面应该是什么样子的。这就是 React 被称为声明性 API 的原因，你只需要声明你希望得到的 UI ，之后 React 负责具体的细节

在react中组件的定义方式有两种:

函数式组件

//1.创建函数式组件
function MyComponent(){
    console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式
    return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

执行了ReactDOM.render(.......之后，发生了什么？

1. React解析组件标签，找到了MyComponent组件。
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。 类式组件

//1.创建类式组件
class MyComponent extends React.Component {
    render(){
    //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
    //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
    console.log('render中的this:',this);
    return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
  }
}
//2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))

执行了ReactDOM.render(.......之后，发生了什么？

1. React解析组件标签，找到了MyComponent组件。
2. 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。

注意:

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

渲染类组件的基本流程:

1. React内部会创建组件实例对象

2. 调用render()得到虚拟DOM, 并解析为真实DOM

3. 插入到指定的页面元素内部

react组件的三大核心属性:

state、props、refs与事件处理