用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 = 

Hello, world

;
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传入到了外层组件中,如:

 
    

我是内容

// 上面的代码等价于: const content =

我是内容

; />

 

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

 

你可能感兴趣的:(用18个小概念轻轻叩开react之门)