react基础知识速览
6、将元素渲染进DOM
组件（component）能够将UI划分为独立的、可复用的部分，这样我们就只需专注于构建每一个单独的部件。
从概念上看，组件就像是函数：接受任意的输入（称为属性，Props），返回React元素。React中有两种定义组件的方式：函数定义和类定义
1、函数定义组件
2、类定义组件
这种方式比起函数定义方式则更加灵活
3、组件渲染
最终就会以<h1>Hello, 张不怂</h1>的方式呈现。在这个过程中，发生了如下的事情：
- 对<Welcome name="张不怂" />元素调用了ReactDOM.render()丰富
- React将{ name: '张不怂' }作为props实参来调用Welcome组件
- Welcome完成渲染，返回<h1>Hello, 张不怂</h1>元素
- ReactDOM计算最小更新代价，然后更新DOM
4、组合组件
5、属性是只读的
需要注意的有：
1、在类中加入state
2、生命周期
1）Mount 已插入真实DOM
2）Update 正在重新渲染
3）Unmount 已移出真实DOM
而相应的，生命周期钩子函数有：
- componentWillMount
- componentDidMount
- componentWillUpdate(newProps, nextState)
- componentDidUpdate(prevProps, prevState)
- componentWillUnmount()
此外，还有两种特殊状态的处理函数：
- componentWillReceiveProps(nextProps) 已加载的组件收到新的参数时调动
- shouldComponentUpdate(nextProps, nextState) 组件判断是否重新渲染时调用
1）render()里用不到的state，不应该声明在state里
2）不能直接使用this.state.xxx = xxx的方式来改变一个state的值，应该使用this.setState()。如：
1）React事件使用camelCase命名（onClick），而不是全小写的形式（onclick）
2）使用JSX，传入的是事件的句柄，而不是一个字符串
注意： 在使用事件回调函数的时候，我们需要特别注意this的指向问题，因为在React里，除了构造函数和生命周期钩子函数里会自动绑定this为当前组件外，其他的都不会自动绑定this的指向为当前组件，因此需要我们自己注意好this的绑定问题，
通常而言，在一个类方式声明的组件里使用事件回调，我们需要在组件的constructor里绑定回调方法的this指向，如：
1、使用变量来存储元素
2、使用&&运算符进行渲染
3、使用三目运算符进行渲染
4、阻止整个组件的渲染
当我们运行以上的代码的时候，会发现控制台提示：Each child in an array or iterator should have a unique "key" prop，因此，我们需要为列表项的每一个项分配一个key，来解决这个问题，通常而言，我们可以使用以下几种方式来提供key：
但是React不推荐在需要重新排序的列表里使用索引下标，因为会导致变得很慢。
注意： 只有在一个项的同胞里区分彼此的时候，才需要使用到key，key不需要全局唯一，只需要在一个数组内部区分彼此时唯一便可。key的作用是给React一个提示，而不会传递给组件。如果我们在组件内需要同样的一个值，可以换个名字传递，如：
1、受控组件
2、多个输入的解决办法
3、非受控组件
1、首先定义转换函数
2、定义组件
1、包含关系
2、何时使用继承？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
到此这篇react精髓（react 技巧）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/41072.html