用18个小概念轻轻叩开react之门

前言

阅读笔记，没有什么结构可言，react入门基础概念。

 

正文

1，在JSX中，{}大括号表示JS代码的开始结束标志，<>包含纯小写被认为是原生html标签，<>包含首字母大写被认为是自定义组件；

 

2，当JSX有多行时，最外层要用一个小括号()包裹起来，这样可以避免自动插入分号机制的问题；

 

3，在JSX中，引号被解析成字符串字面量；

 

4，JSX的属性要写成小驼峰camelCase形式，如className,tabIndex等；

 

5，JSX的本质就是调用React.createElement函数，这个函数包含三个传入参数，依次是html标签类型，属性对象，标签内容，最后生成一个react元素；

 

6，react元素需要通过ReactDOM.render方法才能渲染到页面中，被人们所看到。ReactDOM.render()方法接收两个参数，第一个是通过react生成的react元素，第二个是react元素需要挂载的真实html节点的引用;

const element = <h1>Hello, world</h1>; 
ReactDOM.render(element, document.getElementById('root'))

 

 

7，函数组件的意思就是：一个函数，它最后会返回一个JSX元素。相比于class组件，函数组件不用写render函数，不用在定义的class类中去继承如React.Component之类的东西，我认为：函数组件比起类组件可以说是好多了！因为JS语法的特点中，函数一直都是一等公民，而且一直也不太像一个面向对象的语法；

 

8，在自定义组件里面写属性，这些属性会被包装成一个props对象，然后传入到相应的函数组件中；

 

9，什么叫纯函数？纯函数的规矩就是：只读入参，不改入参；

 

10，如果说props是当前组件接收外部组件传入参数的入口，那么state，也就是状态，则完完全全是当前组件私有的一个管理区域；

 

11，常用的生命周期中，我们拿Vue作为类比：

• ComponentDidMount = mounted
• ComponentWillUnmount = beforeDestory
• ComponentDidUpdate = updated

 

12，在函数组件中，如果最后返回的是null，则不会渲染该组件；

 

13，在react的列表渲染中，没有v-for这种指令，通常对于列表渲染是用数组的map方法来把JS数组元素批量转化成react元素渲染到html中的。当然这里有个很蛋疼的地方，和vue类似，我们这里生成的只是react元素，并不是真正的DOM,实际上，react元素的本质就是虚拟DOM，为了避免虚拟DOM那种顺序一变就不管三七二十一全部销毁重建的性能开销问题，在迭代渲染的列表子元素中，仍需要一个身份标识器key；

 

14，元素的 key 只有放在就近的数组上下文中才有意义，那种隔了超过一层的就没有意义了，所以一般来讲，我们设置身份标识器key的时候，就设在map方法的第一级子元素上。

 

15，所谓受控组件，其实也就是所谓的干燥组件，或者叫工具人组件，它没有自己的私有状态，数据完全受父组件控制；

 

16，如果多个组件需要共用一个状态，一般来说，不是在这些组件之间跳来跳去的传值，而是把他们的共享状态提到最近的父级，这种大家一起用。本质都是通过指向到同一个堆内存区域来实现数据共享；

 

17，JSX是可以嵌套的，嵌套的内容相当等于作为一个属性名为children的prop传入到了外层组件中，如：

<Dialog> 
    <p>我是内容</p> 
</Dialog> 

// 上面的代码等价于： 
const content = <p>我是内容</p>;
<Dialog children={content}> />

 

 18,JSX可以接收任意类型作为props：React元素（也就是自定义组件），基本数据类型，函数是官网推荐的，除此之外当然也包括数组、对象这些引用类型，但是有一个准则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。也就是说：就算传了引用类型，这个引用类型你也只能用，不能改。这与vue是不同的。