react学习总结_react dva 为什么用generate-CSDN博客

本文链接：https://blog.csdn.net/qq_39288987/article/details/102823095

react 中组件的定义方式

通过class实现组件定义 继承Component
通过function定义组件
使用React.createClass方式(已不再推荐使用)

class定义的组件和function定义的组件有什么区别？
class定义的组件有自己的局部状态和生命周期
function定义的组件在16.8之前是没有局部状态和生命周期的,在16.8之后的版本中增加了hooks，function定义的组件可以使用useState和useEffect模拟局部状态和生命周期函数。以后react的组件的方向将向function定义的方式进行发展

什么是refs,它有什么用

ref：通过ref可以获取当前组件中的dom元素
Refs 是一个获取 DOM节点或 React元素实例的工具。
获取DOM节点
例如：
目前我比较常用的是input输入框
<input  type="text" ref="name" placeholder="请输入姓名">
可以在下面设置refs获取input输入框的值
var inputValue =this.$refs.name.value
上述右边如果只写成：
this.$refs获取的是一个数组，取到的是所有带有ref属性的DOM元素
this.$refs.xx取到的是特定的DOM元素
this.$refs.xx.xxx取到的是特定的DOM元素的值

在react官方网站里是这样说的：
在 React 中 Refs 提供了一种方式，允许用户访问DOM 节点或者在render方法中创建的React元素。
在 React单项数据流中，props是父子组件交互的唯一方式。要修改一个子组件，需要通过的新的props来重新渲染。 但是在某些情况下，需要在数据流之外强制修改子组件。被修改的子组件可能是一个React组件实例，也可能是一个DOM元素。对于这两种情况，React 都通过 Refs的使用提供了具体的解决方案。
使用场景
refs 通常适合在一下场景中使用：
	1. 对DOM 元素焦点的控制、内容选择或者媒体播放；
	2. 通过对DOM元素控制，触发动画特效；
	3. 通第三方DOM库的集成。

避免使用 refs 去做任何可以通过声明式实现来完成的事情。举个例子，避免在 Dialog 组件里暴露 open() 和 close() 方法，最好传递 isOpen 属性。

使用方式
关于refs的使用有两种方式: 
1）通过 React.createRef() API【在React 16.3版本之后引入了】；2）在较早的版本中，我们推荐使用 回调形式的refs。

创建 Refs
Refs 是使用 React.createRef() 创建的，并通过 ref 属性附加到 React 元素。在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}


访问 Refs
当 ref 被传递给 render 中的元素时，对该节点的引用可以在 ref 的 current 属性中被访问。

const node = this.myRef.current;

ref 的值根据节点的类型而有所不同：
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。
当 ref 属性用于自定义 class 组件时，ref 对象接收组件的挂载实例作为其 current 属性。
你不能在函数组件上使用 ref 属性，因为他们没有实例。

组件之间传参

组件之间传参
    父传子使用props，父组件自定义属性，子通过props来获取父的属性值
    子传父使用方法调用 ，父组件将自己的某个方法传递给子组件，子组件通过`this.props`接收到父组件的方法，并通过回调的方式来实现   
     非父子组件通信：redux
 	跨级组件通信: 层层组件传递props/context
还可以使用全局的state实现组件传参

jsx 语法

在js中使用html标签
map
三元运算符

组件的生命周期

16.3之前的生命周期

16.3之后的生命周期
在这里插入图片描述

   react( 常用的 )：
   componentWillMount：组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。（建议用componentDidMount替代） 

   render：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
   render()方法必须是一个纯函数，他不应该改变`state`，也不能直接和浏览器进行交互， 应该将事件放在其他生命周期函数中。 
   
   shouldComponentUpdate   默认返回true/ 返回false的时候组件不进行更新
  
   componentWillUpdate:组件更新结束之前执行，在初始化render不执行。

   componentDidUpdate:组件更新结束之后执行，在初始化render不执行

   componentDidMount:   组件挂载完成，在这里可以调用服务器端数据接口获取数据。组件渲染之后调用，只调用一次。

   componentWillReceiveProps：组件初始化时不调用，组件接受新的props时调用。

   componentWillUnmount：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
...

什么是高阶组件

在调用一个组件的时候传递另一个组件当做参数，可以把传递的组件进行一层包装 生成一个新的组件

高阶组件最常见的一个例子 react-redux中的connect,可以为组件添加一些新的属性

虚拟 dom 和 diff 算法

什么是虚拟dom
diff算法: 逐层进行比较，如果有不一样的name进行下一级的比较。发现不同的地方之后进行替换

建议为map添加一个key值，增加虚拟dom的查找速度。(此key不推荐使用索引)

路由/路由传参

search
params

什么是 redux？数据流向

redux是react中的状态管理插件，可以实现全局状态共享。redux和react不是强关联的，在其他框架中也可以使用redux

state
action
reducer
state通过dispatch排异一个action改变reducer，action必须包含一个属性type 用以标识reducer改变的方式

在react中使用redux 需要插件react-redux
在redux中如果要做一些异步操作的时候需要使用中间件redux-thunk

以下内容都是被包含在dva插件中
redux-saga      使用generate函数的方式实现异步请求
redux-router    可以使路由跳转被redux进行管理

另外的状态管理插件 mobx

使用了很多的装饰器语法。语法相较于redux会简单很多，不需要特别的配置。

什么是 react-native？

是使用js做原生应用开发

expo-cli 是一个集成的沙箱环境，可以不用自己搭建原生应用开发环境进行代码调试

umi 企业级的开发框架

集成了路由和redux等功能为一体的开发框架，遵循约定原则 按照规定的目录结构编写代码即可

什么是 dva?

是一个redux的封装，通过几个简单的api就可以非常方便的实现redux的状态管理

通过model的封装在一个文件中定义了state(表示数据) reducers(改变数据) effects(异步操作) namespace(分模块的命名空间)

ui 组件.antd

react 和 vue 有什么区别?

 1. vue是使用单文件组件的方式把所有的组件相关内容在一个文件中进行编写,vue文件使用webpack中的vue-loader实现加载.
react使用jsx语法实现组件的编写.
 2. vue使用数据双向绑定，使用Object.defininePrototype监听对象的setter和getter方法实现相应式的数据更新.
react使用单向数据流机制实现组件的更新.
 3. vue入门简单，react入门比较难
 4.react中组件内容封装简单，组件的可控性比较强。可以非常方便的实现扩展
vue中的相关内容封装的比较紧密，不太适合扩展
还有一些其他的可以参考vue官网中的内容
[vue官网内容](https://cn.vuejs.org/v2/guide/comparison.html)

redux和vuex的区别

redux和vuex都是全局状态管理器，它们都遵循一个效果，单向数据流，但是redux不是和react强关联的，它在任何一个框架（vue,angular）中都能使用。而vuex只能在vue里用