注：学习此篇内容一定要先把类的基本知识搞懂，可参考我另一篇文章： 三分钟让你搞懂Class类 - 掘金 (juejin.cn)
本文是对网站免费资源的知识总结，如侵联删。
废话不多说，直接上例子：
执行了ReactDOM.render(.......之后，发生了什么？
- React解析组件标签，找到了MyComponent组件。
- 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
废话不多说，直接上例子：
- 如果你了解Class的相关知识，你就能知道render其实就是MyComponent实例原型对象上的一个方法而已，那么this自然就执行MyComponent组件实例对象
- 渲染组件时，React做了什么：
- React解析组件标签，找到了MyComponent组件。
- 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
- 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
如果你的组件是有状态（state）的，就是复杂组件，反之，就是简单组件
state就是数据，不管是Vue还是React，都是靠数据驱动视图，只不过底层使用了响应式原理和自动更新视图
因为函数式组件是没有this的，因为函数式组件中采用了严格模式，而严格模式下没有this，就别谈组件实例，更别谈组件实例的核心属性了
只有类式组件有，但是后来react增加了hooks，函数式组件也有了状态
那么state在哪里呢？其实React已经给我们封装好了，我们在render中打印this会发现在组件的实例对象中有context、props、refs、state等初始值 
如果我们需要对类的实例化对象进行一些初始化操作，如增加一个属性，修改一个属性的值，需要借助类的构造器 写 this.xxx=xxx即可
到这里，都没什么难度，接下来我们要给这段文字添加一个点击事件，当点击文字的时候，文字发生改变，在做该操作之前，我们先来解决React中的小问题
小细节
我们把代码撰写如下：给文字加一个click事件，按理说这样没问题，但是我们看效果
这说明你不是把demo函数赋给了点击事件，而是把demo函数运行完的返回值赋给了点击事件，由于demo函数中没有return 任何东西，因此就是undefined，因此不生效，此处小细节需要注意下。 我们只需要这样写，就可以了：
this的指向问题
我们加一个changeWeather事件，如下所示：
而当我们这样写完代码，发现竟然报错了，这里说明this是undefined，这是为何呢？
我们在changeWeather中打印this，发现真的是undefined，因为这个changeWeather不是通过组件实例调用的
解决方案1：
其实加一行代码就能解决，我们这么加
解决方案2：
基于解决方案1，我们可得到最终的解决方案2
因此最后精简之后的代码为：
在上面的案例中，我们不能直接修改isHot的数据，比如：this.state.isHot=!this.state.isHot，这样写了之后，数据虽然发生了变化，但是视图并没有更新，这是因为没有触发React的响应式原理，因此要借助setState来写，即：this.setState({isHot:!isHot})
1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
a) 强制绑定this: 通过函数对象的bind()
b) 箭头函数
3. 状态数据，不能直接修改或更新
- props的使用比较简单，就是给组件身上传递属性，比如name={100}即可，然后在组件内部就可以通过this.props接收到props，之后解构出来使用即可
- 如何给props规范类型呢？这里我们需要给类的身上添加propTypes，注意，是给类本身加，而不是在类中写this.propTypes=xxx，如果是给类本身加，那么我们可以通过Person.propTypes来直接访问，如果是给类的实例对象加，那么必须先new出一个实例对象，之后再使用
- 基于第二点，想给类自身加属性，类提供了一个static方法，因此第二点可简写如下：
Class规定：如果在子类中写了构造器，且子类需要继承父类的某些属性，那么子类中必须写构造器并调用super；当然，如果子类不写构造器，那也就不需要调用super
这个案例就谨遵了Class的知识，因为子类中写了构造器，且接收到了props，那么必须调用super
如果我在构造器中不接收props，那么页面仍然能正常渲染，但是打印出来就是undefined
如文章对state的分析对于第一种情况，我们可以直接写state={}来解决，这样就不需要写构造函数； 对于第二种情况，是为了给函数绑定this，也就是上文中的解决方案1，但是也可以通过解决方案2来解决 因此我们尽量避免在构造器中写super（props），除非你希望在构造器中通过this访问到props
对于函数式组件，虽然没有this，也没有构造函数，但是函数本身是可以接收到形参的，因为函数虽然不能玩state，refs，但是可以玩props等以后有了hooks，函数式组件也都能玩
理解：组件内的标签可以定义ref属性来标识自己，和Vue类似，这里不再做过多阐述
到此这篇react组件三大属性（react组件定义）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/69546.html