# reactLearn

**Repository Path**: bentuotuo/react-learn

## Basic Information

- **Project Name**: reactLearn
- **Description**: 个人学习记录
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-31
- **Last Updated**: 2021-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# reactLearning

### react学习资源

#### 官网（中文）
https://zh-hans.reactjs.org/

#### 官网（英文）
https://reactjs.org

#### 学习视频
https://www.youtube.com/watch?v=rcrq2qkZ-MU&list=PL9nxfq1tlKKnza3MPogWqaYIPtdW_G2lF&index=3

#### 学习记录
- PWA 在使用写网页的形式写手机app
- server worker 离线离线缓存
- Fragment 占位符功能，可以代替JSX语法中限制的最外层元素必须包裹一个元素苏的限制。切在编译完成的页面中，占位符是不显示的
- 组件定义的时候需要constructor定义数据初始化，切组件内部修改数据需要使用setState方法进行修改
- JSX语法在页面中调用函数需要带上 {} 才可以正常使用 , {} 中的内容为js表达式
- // immutable
// state 不允许我们做任何的修改
- 页面中大写字母开头的标签为组件。 小写字母揩油的标签为html代码
- // 不转义，可是存在XXS被攻击的可能 dangerouslySetInnerHTML={{__html:item}}
- {
  // 这是第一个注释测试
}
{/*这是第二个注释测试*/}
- lable标签和input标签组合使用的时候，lable标签上绑定的值由for改为htmlFor='insertArea'；input上设置id='insertArea'

 >  react优势

- 申名式开发

面相数据编程，减少大量操作dom量

- 可以与其他框架并存

react中入口js中有写
ReactDOM.render(
<React.StrictMode>
<TodoList />
</React.StrictMode>,
document.getElementById('root')
);
可以看到所有的react代码是挂载在id为root的dom节点上的，至于其他的dom节点，react不会去影响他们，
这时候就可以引入其他的框架或者类库进行编程。注意！几个挂载的dom之间不要互相影响。

- 组件化

react可以将页面中的各个功能抽离出一个个的小组件，在构建页面的时候通过拼接搭建一个组件树来完成页面的搭建的功能的实现

- 单项数据流

这是react提出的一个数据规则：
父组件可以修改父组件的内容；子组件不能修改父组件的内容，需要修改的时候由父组件传过来一个父组件的方法，然后子组件调用这个方法。
这种做法的好处是避免了在一个组件树下多个子组件依赖通过父组件的数据，而其中的一个或几个子组件去修改父组件的数据，如果强行修改，会报错提示，值是可读属性不能操作。

- 视图层框架 

react的数据能力不是很强，是一个通过数据驱动视图渲染的框架，对于简单的组件树可以直接使用数据交互能力，可以复杂的组件树则不行

- 函数式编程

方便前端自动化测试，前端测试开发的时候只需要考虑出参和入参，然后打印查看


// 当组件的state或者props发生改变的时候，render函数就会被重新执行

// 当父组件的state或者props发生改变的时候，所有的子组件的render函数也会被重新执行

- React虚拟DOM操作简单步骤:

1、拥有基础条件： state数据

2、拥有基础条件： JSX模板

3、数据 + 模板 结合，生成虚拟DOM（虚拟DO就是一个JS对象，用它来描述真实的DOM）（损耗了性能）

<div id='abc'><span>hellow</span></div>

虚拟DOM ： [{ 'div', {id: 'abc}, [{ 'span', {}, 'hellow' }] }]

4、生成真实DOM，在页面上展示

5、state发生改变

6、数据 + 模板 结合，生成新的虚拟DOM

虚拟DOM ： [{ 'div', {id: 'abc}, [{ 'span', {}, 'hi' }] }]

7、新的虚拟DOM和老的虚拟DOM做比较，找到区中的区别 (极大的提升性能)

8、直接操作真实DOM，改变修改的内容

// JSX  -> React.createElement -> 虚拟DOM(JS对象) -> 真实的DOM

// return <div ><span>item</span></div>

// return React.createElement('div', {}, React.createElement( 'span', {} , 'item' ))

> diff算法

setState可以将短时间多次的setState结合成一个setState

虚拟dom比对的时候是同层 比对，发现某一级内容不同，直接重新渲染当前节点和内部的全部内容

列表循环的时候引入key值是为了提高虚拟dom比对的性能

key值用来明确新老虚拟dom的结构是否相同，切记key值最好不要使用index