React技术栈
说说你对React的基本理解
1. 是什么?
动态构建用户界面的JS库
2. React的特点
1). Declarative(声明式编码)
2). Component-Based(组件化编码)
3). 高效
3. React高效的原因
1). 虚拟(virtual)DOM, 不总是直接操作真实DOM(批量更新, 减少更新的次数)
2). 高效的DOM Diff算法, 最小化DOM更新
说说react的jsx
1. JSX 是一个看起来很像 XML 的 js 语法扩展
2. 作用: 创建虚拟DOM(元素对象)
3. 浏览器不能直接运行, 需要使用babel转换成纯JS语法: React.createElement()
4. 相比于纯JS要编码更简洁易读
5. 注意: JSX标签必须有结束, 组件标签首字母必须大写
区别类组件和函数式组件
1. 类组件: 使用class定义的组件, 会产生组件对象, 可以有自身的状态和生命周期勾子
2. 函数组件: 使用function定义的组件, 不产生组件对象, 没有自身的状态和生命周期勾子
3. 补充: 有了hooks语法后, 函数组件也可以有状态了
区别组件对象的3大属性
1. state: 值为容器对象, 保存的是组件内可变的数据,组件根据state中的数据显示, 要更新界面只要更新state即可
2. props: 值为容器对象, 保存的是从组件外传递过来的数据, 当前组件只读, 父组件修改了自动显示新数据
3. refs: 值为容器对象, 保存的是n个有ref属性的dom元素对象, 属性名是ref指定的标识名称, 值为对应的dom元素
React组件化编码的3步与2个重要问题
1. 编码的3步
1). 拆分组件
2). 实现静态组件
3). 实现动态组件
2. 2个重要问题
1). 状态数据保存在哪个组件? 看是某个组件需要, 还是某些组件需要(给父组件)
2). 更新状态数据的行为在哪个组件? 状态在哪个组件, 行为就定义在哪个组件
为什么虚拟dom和dom diff算法能提高性能?
1. 虚拟dom相当于在js和真实dom中间加了一个缓存，利用dom diff算法避免了没有必要的dom操作，从而提高性能。
2. 具体实现步骤如下：
1). 用一般JS对象表示DOM树的结构, 然后用这个树构建一个真正的 DOM 树显示到页面
2). 当状态更新的时候，重新构造一棵新的对象树
3). 然后用新树和旧树进行diff比较, 得到虚拟DOM的差异, 并转化成对应的DOM更新
说说Dom Diff算法
1. 把树形结构按照层级分解，只比较同级元素。给列表结构的每个单元添加唯一的key属性，方便比较。
2. React 只会匹配相同类名的 component合并操作dom和sub是什么属性，调用 component 的 setState 方法的时候, React 将其标记为 dirty.
3. 在每一个事件循环结束时, React 检查所有标记 dirty 的 component 重新绘制.选择性子树渲染。
4. 开发人员可以重写shouldComponentUpdate提高diff的性能。
调用 setState 之后发生了什么？
1. React 会将传入的参数对象与组件当前的状态合并产生了新的state
2. 生成新的虚拟DOM树 ==> render()
3. 计算出新树与老树的节点差异，然后做真实DOM的差异更新
说说react应用中如何与后台通信?
1. 通过ajax请求与后台交互, 但react本身并不包含ajax封装, 需要使用第三方ajax库
2. 可以使用axios/fetch来发送ajax请求
3. 发请求的时机/位置:
1). 初始化请求: componentDidMount()
2). 用户操作后请求: 事件回调函数或相关位置
比较react中组件间3种通信方式
1. 方式一: 通过props传递
1). 通过props可以传递一般属性和函数属性,
2). 一般属性–>父组件向子组件
3). 函数属性–>子组件向父组件通信
4). 缺点: 只能一层一层传递/兄弟组件必须借助父组件
2. 方式二: 消息订阅(subscribe)-发布(publish)机制
1). 实现库: pubsub-js
2). 组件A: 发布消息(相当于触发事件)
3). 组件B: 订阅消息, 接收消息, 处理消息(相当于绑定事件监听)
4). 优点: 对组件关系没有限制
3. 方式三: redux
1). 通过redux可以实现任意组件间的通信
2). 集中式管理多个组件共享的状态, 而pubsub-js并不是集中式的管理
区别React中的事件与原生的DOM事件
1. 为了解决跨浏览器兼容性问题，React 会将浏览器原生事件封装为合成事件
2. React 并没有直接将事件附着到子元素上, 而是将事件绑定在了组件的根元素上(使用事件委托)
何为受控组件(controlled component)
1. 组件中的表单项能在输入过程中自动收集输入数据到状态中
2. 在react中必须通过onChange监听才能实现
何为高阶组件(higher order component)
1. 高阶组件是一个以组件为参数并返回一个新组件的函数。
2. HOC 运行你重用代码、逻辑和引导抽象。最常见的可能是Redux 的 connect 函数
3. 如果你发现你在不同的地方写了大量代码来做同一件事时，就应该考虑将代码重构为可重用的 HOC
你能用HOC做什么？
1. 代码重用，逻辑和引导抽象
2. 渲染劫持
3. 状态抽象和控制
4. props 控制
Redux遵循的三个原则是什么？
1. 单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
2. 状态是只读的：改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样dom和sub是什么属性，该操作是对数据更改的最小表示。
3. 使用纯函数进行更改：为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。
列出 Redux 的重要组成结构。
1. Action – 这是一个用来描述发生了什么事情的对象。
2. Reducer – 这是一个确定状态将如何变化的地方。
3. Store – 整个程序的状态/对象树保存在Store中。
Redux 有哪些优点？
1. 结果的可预测性 – 由于总是存在一个真实来源，即 store ，因此不存在如何将当前状态与动作和应用的其他部分同步的问题。
2. 可维护性 – 代码变得更容易维护，具有可预测的结果和严格的结构。
3. 服务器端渲染 – 你只需将服务器上创建的 store 传到客户端即可。这对初始渲染非常有用，并且可以优化应用性能，从而提供更好的用户体验。
4. 开发人员工具 – 从操作到状态更改，开发人员可以实时跟踪应用中发生的所有事情。
5. 社区和生态系统 – Redux 背后有一个巨大的社区，这使得它更加迷人。一个由才华横溢的人组成的大型社区为库的改进做出了贡献，并开发了各种应用。
6. 易于测试 – Redux 的代码主要是小巧、纯粹和独立的功能。这使代码可测试且独立。
什么是React 路由？
1. React 路由是一个构建在 React 之上的强大的路由库，它有助于向应用程序添加新的屏幕和流。
2. 它负责维护标准化的结构和行为，并用于开发单页 Web 应用。 React 路由有一个简单的API。
说说对react-router的理解和使用
1. 是什么: 用来实现SPA的react插件
2. 相关API:
1). 相关组件
2). 对象或函数
props.history对象
props.match对象
props.location对象
withRouter函数
详细说说redux
1. 何为 redux
1). redux 的基本思想是应用的state保存在一个单一的store对象中。
2). 而改变应用state的唯一方式是在应用中触发actions，然后为这些actions编写reducers来修改state。
3). 整个 state 转化是在 reducers 中完成，并且不应该有任何副作用
2. 何为 store
1).store 是一个 javascript 对象，它保存了整个应用的 state。与此同时，store 也承担以下职责：
2). 允许通过 getState() 访问 state
3). 通过 dispatch(action) 改变 state
4). 通过 subscribe(listener) 注册 listeners
3. 何为 action
1). action是一个纯 js对象，必须有一个 type 属性表明正在执行的 action 的类型。
2). 实质上，action 是将数据从应用程序发送到 store 的有效载荷
4. 何为 reducer
1). 一个reducer是一个纯函数，
2). 该函数以先前的state和一个action作为参数，并返回新的state。
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，加站长微信免费获取积分，会员只需38元，全站资源免费下载 点击查看详情
站 长 微 信： thumbxmw
