带你了解React面向组件编程

<Person {…person}/>

（4）默认属性值

Person.defaultProps = {

age:18,

sex:‘男’

}

5、组件类的构造函数

constructor(props){

super(props)

console.log(props)

}

组件实例的三大核心属性3：refs与事件处理

---

编码

（1）字符串形式的ref

（2）回调形式的ref

<input ref = {© => {this.input1} = c}/>

（3）createRef创建ref容器

myRef = React.createRef()

事件处理

---

（1）通过onXxx属性指定事件处理函数（注意大小写）

​ a、React使用的是自定义（合成）时间，而不是使用的原生DOM事件

​ b、React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）

（2）通过event.target得到发生事件的DOM元素对象

收集表单数据

---

理解

包含表单的组件分类

​ a、受控组件

​ b、非受控组件

组件生命周期

---

理解

（1）组件对象从创建到死亡它会经历特定阶段

（2）React组件对象包含一系列勾子函数（声明周期回调函数）在特定的时刻调用

（3）我们定义组件时，在特定的生命周期回调函数中做特定的工作。

声明周期的三个阶段（旧）

1、初始化阶段：由ReactDOM.render()触发----初次渲染

​ 1、constructor()

​ 2、componentWillMount()

​ 3、render()

​ 4、componentDidMount()

2、更新阶段：由组件内部this.setState()或父组件重新render触发

​ 1、shouldComponentUpdate()

​ 2、componentWillUpdate()

​ 3、render()

​ 4、componentDidUpdate()

3、卸载组件：由ReacyDOM.unmountComponentAtNode()触发

​ 1、componentWillUnmount()

生命周期的三个阶段（新）

1、初始化阶段:由ReactDOM.render()触发—初次渲染

​ 1、construstor()

​ 2、getDerivedStateFromProps

​ 3、render()

​ 4、componentDidMount()

2、更新阶段：由组件内部this.setState()或父组件重新render触发

​ 1、getDerivedStateFromProps

​ 2、shouldComponentUpdate()

​ 3、render()

​ 4、getSnapshotBeforeUpdate

​ 5、componentDidUpdate()

3、卸载组件：由ReactDOM.unmountComponentAtNode()触发

​ 1、componentWillUnmount()

经典面试题：

---

（1）react/vue中的key有什么作用？（key的内部原理是什么？）

虚拟DOM中key的作用：

1、简单的说：key是虚拟DOM对象的标识，在更新显示时key起着及其重要的作用

总结：心得体会

既然选择这个行业，选择了做一个程序员，也就明白只有不断学习，积累实战经验才有资格往上走，拿高薪，为自己，为父母，为以后的家能有一定的经济保障。

学习时间都是自己挤出来的，短时间或许很难看到效果，一旦坚持下来了，必然会有所改变。不如好好想想自己为什么想进入这个行业，给自己内心一个答案。

面试大厂，最重要的就是夯实的基础，不然面试官随便一问你就凉了；其次会问一些技术原理，还会看你对知识掌握的广度，最重要的还是你的思路，这是面试官比较看重的。

最后，上面这些大厂面试真题都是非常好的学习资料，通过这些面试真题能够看看自己对技术知识掌握的大概情况，从而能够给自己定一个学习方向。包括上面分享到的学习指南，你都可以从学习指南里理顺学习路线，避免低效学习。

大厂Java架构核心笔记（适合中高级程序员阅读）：

一旦坚持下来了，必然会有所改变。不如好好想想自己为什么想进入这个行业，给自己内心一个答案。

面试大厂，最重要的就是夯实的基础，不然面试官随便一问你就凉了；其次会问一些技术原理，还会看你对知识掌握的广度，最重要的还是你的思路，这是面试官比较看重的。

最后，上面这些大厂面试真题都是非常好的学习资料，通过这些面试真题能够看看自己对技术知识掌握的大概情况，从而能够给自己定一个学习方向。包括上面分享到的学习指南，你都可以从学习指南里理顺学习路线，避免低效学习。

大厂Java架构核心笔记（适合中高级程序员阅读）：

[外链图片转存中…(img-vGheTiUt-1720104021089)]