乐趣区

关于react.js:react简介

jiezi

react 生命周期

1.shouldComponentUpdate 的作用?

shouldComponentUpdate 容许咱们手动地判断是否要进行组件更新，依据组件的利用场景设置函数的正当返回值可能帮咱们防止不必要的更新

2.React 中 keys 的作用是什么？

Keys是 React 是 for 循环外面先比拟 key 值如果雷同，而后去比拟外面的内容，如果雷同就不必更新 dom，只用更新最新数据变动，如果没有 key 值，
如果 key 一样，若组件属性有所变动，则 react 只更新组件对应的属性；没有变动则不更新，如果 key 不一样，则 react 先销毁该组件，而后从新创立该组件

3. 何为受控组件(controlled component)?

比方 <input/>, <select> 和 <textarea>
如 onChange 会更新 state，从新渲染组件，
而非受控组件是比方失去焦点或者提交按钮，须要的时候再去取就是非受控组件

4.setState 为什么是异步的
  1. 保障外部的一致性（因为 props 是要等到父组件渲染过后能力拿到，也就是不能同步更新，state 出于统一性设成异步更新）
  2. 性能优化（举例说你正在一个聊天窗口输出，如果来了一条新音讯又要 render, 那就会阻塞你的以后操作，导致提早什么的）
  3. 反对 state 在幕后渲染（异步能够使 state 在幕后更新，而不影响你以后旧的页面的交互，晋升用户体验）
5.react 性能优化计划
  • 重写 shouldComponentUpdate 来防止不必要的 dom 操作
  • 应用 production 版本的react.js
  • 应用 key 来帮忙 React 辨认列表中所有子组件的最小变动
6. 类组件和函数组件之间有什么区别？

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件应用的时候要实例化，而函数组件间接执行函数取返回后果即可。为了进步性能，尽量应用函数组件。
区别函数组件类组件 是否有 this 没有有是否有生命周期没有有是否有状态 state 没有

7.state 和 props 有什么区别
  • props 是一个从内部传进组件的参数，次要作为就是从父组件向子组件传递数据，它具备可读性和不变性，只能通过内部组件被动传入新的 props 来从新渲染子组件，否则子组件的 props 以及展示模式不会扭转。
  • state 的次要作用是用于组件保留、管制以及批改本人的状态，它只能在 constructor 中初始化，它算是组件的公有属性，不可通过内部拜访和批改，只能通过组件外部的 this.setState 来批改，批改 state 属性会导致组件的从新渲染。
8. 如何创立 refs？
class MyComponent extends React.Component {constructor(props) {super(props);
    this.myRef = React.createRef();}
  render() {return <div ref={this.myRef} />;
  }
}
ref={(input) => this.input = input}
9.constructor 中 super 与 props 参数一起应用的目标是什么？

在调用办法之前，子类构造函数无奈应用 this 援用 super()。

在 ES6 中，在子类的 constructor 中必须先调用 super 能力援用 this。

在 constructor 中能够应用 this.props

10. 调用 setState 之后产生了什么？

react-router 的原理

向路由传递参数

browerRouter 和 hashRouter 区别

React-Router 怎么获取历史对象？
React-Router 怎么获取 URL 的参数？
在 history 模式中 push 和 replace 有什么区别？

push 能够返回到上一级，replace 返回不到上一级，比方登陆页面

React-Router 怎么设置重定向？

<Redirect to=”/home”/>

React-Router 4 中 <Router> 组件有几种类型？
React-Router 3 和 React-Router 4 有什么变动？增加了什么好的个性？
React-Router 的实现原理是什么？

顶层 Router 订阅 history，history 变动时，Router 调用 setState 将 location 向下传递，并设置到 RouterContext。Route 组件匹配 context 中的 location 决定是否显示。Switch 抉择最先匹配到的显示，利用 props children。Link 组件阻止 a 标签默认事件，并调用 history.push。NavLink 通过匹配 context 中的 location 决定是否为 active 状态。Redirect 组件匹配 context 里的 location 决定是否调用 history.push(to)，Switch 组件会匹配 location 和 from 决定是否发动 Redirect。

React-Router 4 的 switch 有什么用？

最新匹配那个路由，不持续往下匹配

React-Router 4 怎么在路由变动时从新渲染同一个组件？
React-Router 的 <Link> 标签和 <a> 标签有什么区别？
React 的路由和一般路由有什么区别？
请你说说 React 的路由的优缺点？
请你说说 React 的路由是什么？

何为高阶组件（HOC）？

  1. 代码复用，逻辑抽象化
  2. 渲染劫持
  3. 抽象化和操作状态（state）
  4. 操作属性（props）减少或者批改 props
  5. const withLoading = Loading => WapperedComponent => {
  6. ` const WithLoading = props => {
  7. return props.data.length === 0 ? (
  8. <Loading />
  9. ) : (
  10. <WapperedComponent {…props} />
  11. );
  12. };
  13. return WithLoading;
  14. };`
    const Loading = () => <p>loading</p>;
    withLoading(Loading)(Component)

Context

React.createContext()

这个办法用来创立 context 对象，并蕴含 Provider、Consumer 两个组件 <Provider />、<Consumer />

const {Provider, Consumer} = React.createContext();

Provider

数据的生产者，通过 value 属性接管存储的公共状态，来传递给子组件或后辈组件

eg:

<Provider value={/* some value */}>

Consumer

数据的消费者，通过订阅 Provider 传入的 context 的值，来实时更新以后组件的状态
 eg: 

<Consumer>
  {value => /* render something based on the context value */}
</Consumer>

https://segmentfault.com/a/11…

hook

useState useEffect useRef

import {useSelector, useDispatch} from "react-redux";

redux

首先是 dispatch 一个 action。

而后 reducer 会收到这个 action, 依据这个 action 对状态进行批改。

状态批改当前会被解决容器捕捉到。

从而对相干的界面进行更新。

[应用 webpack 打包 React 我的项目，怎么减小生成的 js 大小？]

应用 commonsChunkPlugin 抽出公共代码

退出移动版