react学习小记

React ：

react和vue的不同：

vue： 双向数据流，他的数据绑定依赖数据劫持，object.defineProperty() 中的getter 和 setter 。更形视图是采用 MVVM

React: 单向数据流, 依赖 onChange / setState 模式，来实现数据双向绑定

vue： 组件传值方式，props 和 data 来进行传值

react： 组件传值方式，props 和 state 来进行传值

都可以通过写一个 event bus 公共组件来进行一个 传值

跨层级： react 可以使用 react.context 来实现跨层级通讯

react： 使用，jsx 语法来实现插值，条件渲染，循环等。

vue： 依赖指令，难定位bug

React 中的 hook:

useState： 是一个组件初始的状态

useEffect: 包含了 react 的三个生命周期的，didmounted didupdata willdestory 这些，所以可以使用这个完成，在 dom 渲染完成时，获取数据，一般获取整个页面数据，就使用这个方法，完成信息的获取，并且 在整个页面跳出，摧毁的时候，对 timer 进行 清除等操作。

react 项目 创建之初：

使用 yarn create react-app [project-name] (–template=typescript)

后面那个不写，就会创建一个以。js jsx 为主的 react 项目，加上就是 ts/tsx 了

创建完成后，的目录结构，

入口为。app.tsx

页面的组成：

所有的页面，组件都是由 tsx + css/lss 这两部分组成，

tsx文件： 内部结构

主要分为 三个部分，

• 第一部分就是 import 需要引入的东西，以及 interface（一些类型的合集） ，以及全局的一些数据。

• 第二部分就是 主体function 里面， 这里面就是写 数据处理，获取数据，函数，等等功能

• 第三部分就是 return 里， 这里面就是对 这个 页面/组件，进行一个布局，里面是 html 代码。用以展示上面 获取/处理后的 数据

接着就是 css/less 文件

就是 单纯的 页面样式

一些页面想要使用这些 css 文件，之需要在 开头，引入对应。css 文件即可

使用组件：

当一个组件创建好了，只需要在 app.tsx 中，入口文件中，先进行引用import，需要传入参数的传入参数，不需要的就不穿入参数，然后就可以使用了。

当一个组件需要使用在其标签内部嵌套标签的时候，这时候默认必须是 双标签，所以不管是否传值，只要是需要内部需要嵌套标签的话，就需要引入一个属性 children 并且，这个属性 需要 在 return 中使用 {children}

如此：就可以在 app 中使用双标签了

还是在这，我们定义了 iprops，表示的是，所有调用这个组件的时候，都支持传入一些值，比如 name,age 啥的，所谓的 父组件 传值，就是这样的，所以，所有 iprops里面声明了 的变量，都不能手动更改，只能由父组件 传入，不然会造成数据污染。