careteenl / react Goto Github PK

• 共同点： props 和 state 都属于 react 数据接口，他们都可以决定组件的行为和状态
• 不同点：
  • props 属于对外接口，state 属于对内接口，props 主要是父组件传递参数配置该组件，组件内部无法控制也无法修改。想要获取父组件的数据只能通过回调函数的形式（即在自组件中调用父组件的方法）。
  • state 主要用于保存，控制，修改组件自身状态，你可以理解state是一个局部的，只能被组件自身控制的数据源。不能被外界获取和修改。我们可以通过this.setState更新数据，setState导致组件重新渲染。
• 总之props是让外部对组件进行配置，state是让组件控制自己的状态
• 工作中：没有state的组件叫无状态组件，反之有状态组件，工作中尽量多无状态组件，尽量少写有状态组件，增加代码的可维护性和复用性。

• 1. 通过 ref 访问到组件实例
• 2. 通过refs 访问真实的dom
• 三种创建ref方式，
  • 1. 直接指定ref = ‘xxx’ ref 是一个字符串，react不推荐使用了
  • 2. 通过React.createRef()创建，创建的ref 有个 current属性，函数组件如果需要使用，需要使用React.forwardRef 转发一下ref。hoc组件传递ref也存在同样的问题，需要使用React.forwardRef 转发
  • 3. 通过函数 ref={input => this.userName = input} ,获取值需要使用 this.userName.value

创建React动画有以下几种：

• 1.基于定时器或requestAnimationFrame的间隔动画；使用定时器可能会有掉帧问题，而使用requestAnimationFrame则性能较好，完全使用js，不依赖css，帧数跟屏幕刷新率一致，页面运行到后台会自动暂停提高性能。
• 2.基于css3中的animation和transition简单动画；有较高的性能，代码量少，但是只能依赖于css效果，对于复杂动画比较难实现跟控制。
• 3.React动画插件CssTransitionGroup；性能比较好，但限定于入场跟出场场景。
• 4.其他第三方动画库。

受控组件和非受控组件，是针对表单而言的。

受控组件

• 1. 可以通过在初始state中动态设置value值
• 2. 每当表单的值发生变化时，调用onChange事件处理器。如果添加了value （单选框和复选框对应的是checked）而没有添加onChange会受到react警告
• 3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
• 4. setState触发视图的重新渲染，完成表单组件值得更新

非受控组件

表现形式上，react中没有添加value属性（单选按钮和复选框对应的是checked）的表单组件元素就是非受控组件

• 1.非受控组件即不受状态的控制，获取数据就是相当于操作DOM。
• 2.非受控组件的好处是很容易和第三方组件结合。

Redux 本身是个状态管理框架,核心或者说目的一句话就能概括, 清晰的描述应用的状态 。

Redux 核心和原则

• 1.这个应用的状态是一个唯一的状态树
• 2.状态是只读的, 只能通过 action 来触发修改, 其实实际修改状态的是 reducer
• 3修改状态只能通过纯函数

Redux 中的概念

• 1.reducer
  reducer 就是实际改变 state 的函数, 在 redux 中, 也只有 reducer 能够改变 state.
  根据 redux 的原则, 整个应用只有一个唯一的状态树, 这样, 理论上只要一个 reducer 就够了. 但是, 实际编码时, 如果应用稍具规模, 只有一个 reducer 文件, 显然不利于分模块合作开发, 也不利于代码维护.
  所以, reduer 一般是按模块, 或者根据你所使用的框架来组织, 会分散在多个文件夹中. 这时, 可以通过 redux 提供的 API combineReducers 来合并多个 reducer, 形成一个唯一的状态树.
  reducer 的使用只要注意 2 点:1、必须是纯函数2、多个 reducer 文件时, 确保每个 reducer 处理不同的 action, 否则可能会出现后面的 reducer 被覆盖的情况
• 2.state
  state 或者说是 store, 其实就是整个应用的状态.
• 3.action
  redux 中的 action 其实就是一个 包含 type 字段的plain object. type 字段决定了要执行哪个 reducer, 其他字段作为 reducer 的参数.
• 4.action creator
  action creator 本质是一个函数, 返回值是一个满足 action 的定义的 plain object. 使用 action creator 的目的就是简化 action 的定义
• 5.dispath
  view层通过action来改变store从而改变当前的state，但是action只是一个对象而已,store.dispatch() 就是 view 发出 Action对象的唯一方法。
  dispatch的中文意思就是派遣、发送的意思。 即将action发送到store.
• 6.subscribe
  store允许使用 store.subscripbe 方法设置监听函数，一旦 state 发生变化， 就自动执行这个函数。
• 7.middleware
  redux 的 middleware 发生在 dispatching an action 和 reaches the reducer 之间. 在这个时间点, 除了可以实现异步操作, 还可以实现 logging等等.

• 1、React Context优点：能够让数据在组件树中传递，基于树形结构共享数据的方式，在某个节点组件开启提供context后，所有后代节点组件都可以获取到共享的数据。
  而props或者state进行多级数据传递，则数据需要自顶下流经过每一级组件，无法跨级。
• 2、React Context缺点：
• （1）context相当于全局变量， 难以追溯数据源
• （2）耦合度高，即不利于组件复用也不利于测试
• （3）当 props 改变或者 setState 被调用，生成新的 context，但是 shouldComponentUpdate 返回的 false 会 block 住 context，导致没有更新。
• 3、React Context使用：可以通过Provider组件的value来传递数据，也可以通过调用react.createContext()来产生context，然后在Consumer组件获得context中的数据。

React hooks 是React 16.8 的新增特性，它的出现主要是为了解决状态逻辑复用，涉及的主要业务场景如下：

• 1.复杂组件的状态跟操作分散在各个生命周期中，难以维护；hooks可以整合关联的处理逻辑到同一函数，各个关联逻辑可根据各自的状态的更新而触发执行。
• 2.组件之间相同的操作无法复用，而render props和HOC在解决复用问题同时却也导致了组件树层级过深；使用自定义hooks能让开发人员无需改变组件结构也能复用逻辑处理。
• 3.大量的使用class组件使react的编译特性无法发挥出来；使用hooks可以在不编写class的情况下使用state以及其他的React特性。
• 4.函数组件没有状态和生命周期，函数组件无法处理数据或其他复杂逻辑，主要基于传入的props来更新视图；使用hooks让函数组件拥有自己的状态，能独立处理逻辑。
• 5.类组件在使用中存在this指向、难以压缩导致的性能问题；hooks能使用react的特性同时免去class导致的问题。

React Hooks更容易将组件的 UI 与状态分离，多个状态不会产生嵌套，写法还是平铺的（renderProps 可以通过 compose 解决，可不但使用略为繁琐，而且因为强制封装一个新对象而增加了实体数量）。
Hooks 可以引用其他 Hooks。Hook 函数必须以 "use" 命名开头，因为这样才方便 eslint 做检查，防止用 condition 判断包裹 useHook 语句。

国际化的主要原理是：

通过改变语言状态来切换不同的语言配置文件，
例如en.json，cn.json。
解析配置文件进行渲染。

国际化主要考虑的因素包括：

中英文字翻译，日期&时间显示习惯，数字显示（英文环境下每隔3位一个逗号），量词的显示（英文复数）等，
我们可以分别封装成这几种高阶组件，将中英文习惯做为属性传递进去，在高阶组件中做处理。如：

语言配置文件中将包含的上面几种要素用'<>'等符号包裹（借鉴模版字符串的**),例如 date: 'Today is <val, date>'， message: 'I have ten <apple, plural>'。
写一个方法替换<>及其中内容为对应组件。

• 展示组件
  1. 关注页面的展示效果（外观）
  2. 内部可以包含展示组件和容器组件，通常会包含一些自己的DOM结构和样式
  3. 通常允许通过this.props.children方式来包含其他组件。
  4. 对应用程序的其他部分没有依赖关系，例如Flux操作或store。
  5. 不用关心数据是怎么加载和变动的。
  6. 只能通过props的方式接收数据和进行回调(callback)操作。
  7. 很少拥有自己的状态，即使有也是用于展示UI状态的。
  8. 通常会写成函数式组件除非该组件需要自己的状态，生命周期或者做一些性能优化。
• 容器组件
  1. 关注应用的是如何工作的
  2. 内部可以包含容器组件和展示组件
  3. 提供数据和行为给其他的展示组件或容器组件
  4. 往往是有状态的，因为它们倾向于作为数据源
  5. 通常使用高阶组件生成，例如React Redux的connect。