关于react.js:React面试八股文第二期

5次阅读

共计 14107 个字符，预计需要花费 36 分钟才能阅读完成。

React.forwardRef 会创立一个 React 组件，这个组件可能将其承受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特地有用：

转发 refs 到 DOM 组件
在高阶组件中转发 refs

操作 DOM，为什么操作 DOM?
场景
- 图片渲染好后，操作图片宽高。比方做个放大镜性能

（1）哪些办法会触发 react 从新渲染?

setState（）办法被调用

setState 是 React 中最罕用的命令，通常状况下，执行 setState 会触发 render。然而这里有个点值得关注，执行 setState 的时候不肯定会从新渲染。当 setState 传入 null 时，并不会触发 render。

class App extends React.Component {
  state = {a: 1};

  render() {console.log("render");
    return (
      <React.Fragement>
        <p>{this.state.a}</p>
        <button
          onClick={() => {            this.setState({ a: 1}); // 这里并没有扭转 a 的值          }}        >          Click me        </button>
        <button onClick={() => this.setState(null)}>setState null</button>
        <Child />
      </React.Fragement>
    );
  }
}

父组件从新渲染

只有父组件从新渲染了，即便传入子组件的 props 未发生变化，那么子组件也会从新渲染，进而触发 render

（2）从新渲染 render 会做些什么?

会对新旧 VNode 进行比照，也就是咱们所说的 Diff 算法。
对新旧两棵树进行一个深度优先遍历，这样每一个节点都会一个标记，在到深度遍历的时候，每遍历到一和个节点，就把该节点和新的节点树进行比照，如果有差别就放到一个对象外面
遍历差别对象，依据差别的类型，依据对应对规定更新 VNode

React 的解决 render 的根本思维模式是每次一有变动就会去从新渲染整个利用。在 Virtual DOM 没有呈现之前，最简略的办法就是间接调用 innerHTML。Virtual DOM 厉害的中央并不是说它比间接操作 DOM 快，而是说不论数据怎么变，都会尽量以最小的代价去更新 DOM。React 将 render 函数返回的虚构 DOM 树与老的进行比拟，从而确定 DOM 要不要更新、怎么更新。当 DOM 树很大时，遍历两棵树进行各种比对还是相当耗性能的，特地是在顶层 setState 一个渺小的批改，默认会去遍历整棵树。只管 React 应用高度优化的 Diff 算法，然而这个过程依然会损耗性能.

区别：

对于事件名称命名形式，原生事件为全小写，react 事件采纳小驼峰；
对于事件函数解决语法，原生事件为字符串，react 事件为函数；
react 事件不能采纳 return false 的形式来阻止浏览器的默认行为，而必须要地明确地调用 preventDefault() 来阻止默认行为。

合成事件是 react 模仿原生 DOM 事件所有能力的一个事件对象，其长处如下：

兼容所有浏览器，更好的跨平台；
将事件对立寄存在一个数组，防止频繁的新增与删除（垃圾回收）。
不便 react 对立治理和事务机制。

事件的执行程序为原生事件先执行，合成事件后执行，合成事件会冒泡绑定到 document 上，所以尽量避免原生事件与合成事件混用，如果原生事件阻止冒泡，可能会导致合成事件不执行，因为须要冒泡到 document 上合成事件才会执行。

React 申明组件的三种形式：

函数式定义的 无状态组件
ES5 原生形式 React.createClass 定义的组件
ES6 模式的 extends React.Component 定义的组件

（1）无状态函数式组件 它是为了创立纯展现组件，这种组件只负责依据传入的 props 来展现，不波及到 state 状态的操作
组件不会被实例化，整体渲染性能失去晋升，不能拜访 this 对象，不能拜访生命周期的办法

（2）ES5 原生形式 React.createClass // RFC React.createClass 会自绑定函数办法，导致不必要的性能开销，减少代码过期的可能性。

（3）E6 继承模式 React.Component // RCC 目前极为举荐的创立有状态组件的形式，最终会取代 React.createClass 模式；绝对于 React.createClass 能够更好实现代码复用。

无状态组件绝对于于后者的区别： 与无状态组件相比，React.createClass 和 React.Component 都是创立有状态的组件，这些组件是要被实例化的，并且能够拜访组件的生命周期办法。

React.createClass 与 React.Component 区别：

① 函数 this 自绑定

React.createClass 创立的组件，其每一个成员函数的 this 都有 React 主动绑定，函数中的 this 会被正确设置。
React.Component 创立的组件，其成员函数不会主动绑定 this，须要开发者手动绑定，否则 this 不能获取以后组件实例对象。

② 组件属性类型 propTypes 及其默认 props 属性 defaultProps 配置不同

React.createClass 在创立组件时，无关组件 props 的属性类型及组件默认的属性会作为组件实例的属性来配置，其中 defaultProps 是应用 getDefaultProps 的办法来获取默认组件属性的
React.Component 在创立组件时配置这两个对应信息时，他们是作为组件类的属性，不是组件实例的属性，也就是所谓的类的动态属性来配置的。

③ 组件初始状态 state 的配置不同

React.createClass 创立的组件，其状态 state 是通过 getInitialState 办法来配置组件相干的状态；
React.Component 创立的组件，其状态 state 是在 constructor 中像初始化组件属性一样申明的。

（1）props

props 是一个从内部传进组件的参数，次要作为就是从父组件向子组件传递数据，它具备可读性和不变性，只能通过内部组件被动传入新的 props 来从新渲染子组件，否则子组件的 props 以及展示模式不会扭转。

（2）state

state 的次要作用是用于组件保留、管制以及批改本人的状态，它只能在 constructor 中初始化，它算是组件的公有属性，不可通过内部拜访和批改，只能通过组件外部的 this.setState 来批改，批改 state 属性会导致组件的从新渲染。

（3）区别

props 是传递给组件的（相似于函数的形参），而 state 是在组件内被组件本人治理的（相似于在一个函数内申明的变量）。
props 是不可批改的，所有 React 组件都必须像纯函数一样爱护它们的 props 不被更改。
state 是在组件中创立的，个别在 constructor 中初始化 state。state 是多变的、能够批改，每次 setState 都异步更新的。

（1）受控组件 在应用表单来收集用户输出时，例如<input><select><textearea> 等元素都要绑定一个 change 事件，当表单的状态发生变化，就会触发 onChange 事件，更新组件的 state。这种组件在 React 中被称为 受控组件，在受控组件中，组件渲染出的状态与它的 value 或 checked 属性绝对应，react 通过这种形式打消了组件的部分状态，使整个状态可控。react 官网举荐应用受控表单组件。

受控组件更新 state 的流程：

能够通过初始 state 中设置表单的默认值
每当表单的值发生变化时，调用 onChange 事件处理器
事件处理器通过事件对象 e 拿到扭转后的状态，并更新组件的 state
一旦通过 setState 办法更新 state，就会触发视图的从新渲染，实现表单组件的更新

受控组件缺点： 表单元素的值都是由 React 组件进行治理，当有多个输入框，或者多个这种组件时，如果想同时获取到全副的值就必须每个都要编写事件处理函数，这会让代码看着很臃肿，所以为了解决这种状况，呈现了非受控组件。

（2）非受控组件 如果一个表单组件没有 value props（单选和复选按钮对应的是 checked props）时，就能够称为非受控组件。在非受控组件中，能够应用一个 ref 来从 DOM 取得表单值。而不是为每个状态更新编写一个事件处理程序。

React 官网的解释：

要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你能够应用 ref 来从 DOM 节点中获取表单数据。
因为非受控组件将实在数据贮存在 DOM 节点中，所以在应用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码好看性，并且心愿疾速编写代码，应用非受控组件往往能够缩小你的代码量。否则，你应该应用受控组件。

例如，上面的代码在非受控组件中接管单个属性：

class NameForm extends React.Component {constructor(props) {super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(event) {alert('A name was submitted:' + this.input.value);
    event.preventDefault();}
  render() {
    return (<form onSubmit={this.handleSubmit}>
        <label>
          Name:          <input type="text" ref={(input) => this.input = input} />        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

总结： 页面中所有输出类的 DOM 如果是现用现取的称为非受控组件，而通过 setState 将输出的值保护到了 state 中，须要时再从 state 中取出，这里的数据就受到了 state 的管制，称为受控组件。

该办法当 props 发生变化时执行，初始化 render 时不执行，在这个回调函数外面，你能够依据属性的变动，通过调用 this.setState() 来更新你的组件状态，旧的属性还是能够通过 this.props 来获取, 这里调用更新状态是平安的，并不会触发额定的 render 调用。

应用益处： 在这个生命周期中，能够在子组件的 render 函数执行前获取新的 props，从而更新子组件本人的 state。能够将数据申请放在这里进行执行，须要传的参数则从 componentWillReceiveProps(nextProps)中获取。而不用将所有的申请都放在父组件中。于是该申请只会在该组件渲染时才会收回，从而加重申请累赘。

componentWillReceiveProps 在初始化 render 的时候不会执行，它会在 Component 承受到新的状态 (Props) 时被触发，个别用于父组件状态更新时子组件的从新渲染。

这三者是目前 react 解决代码复用的次要形式：

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 本身不是 React API 的一部分，它是一种基于 React 的组合个性而造成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数。
render props 是指一种在 React 组件之间应用一个值为函数的 prop 共享代码的简略技术，更具体的说，render prop 是一个用于告知组件须要渲染什么内容的函数 prop。
通常，render props 和高阶组件只渲染一个子节点。让 Hook 来服务这个应用场景更加简略。这两种模式仍有用武之地，（例如，一个虚构滚动条组件或者会有一个 renderltem 属性，或是一个可见的容器组件或者会有它本人的 DOM 构造）。但在大部分场景下，Hook 足够了，并且可能帮忙缩小嵌套。

（1）HOC 官网解释∶

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 本身不是 React API 的一部分，它是一种基于 React 的组合个性而造成的设计模式。

简言之，HOC 是一种组件的设计模式，HOC 承受一个组件和额定的参数（如果须要），返回一个新的组件。HOC 是纯函数，没有副作用。

// hoc 的定义
function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {constructor(props) {super(props);
      this.state = {data: selectData(DataSource, props)
      };
    }
    // 一些通用的逻辑解决
    render() {
      // ... 并应用新数据渲染被包装的组件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };

// 应用
const BlogPostWithSubscription = withSubscription(BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id));

HOC 的优缺点∶

长处∶ 逻辑服用、不影响被包裹组件的外部逻辑。
毛病∶ hoc 传递给被包裹组件的 props 容易和被包裹后的组件重名，进而被笼罩

（2）Render props 官网解释∶

“render prop” 是指一种在 React 组件之间应用一个值为函数的 prop 共享代码的简略技术

具备 render prop 的组件承受一个返回 React 元素的函数，将 render 的渲染逻辑注入到组件外部。在这里，”render” 的命名能够是任何其余无效的标识符。

// DataProvider 组件外部的渲染逻辑如下
class DataProvider extends React.Components {
     state = {name: 'Tom'}

    render() {
    return (
        <div>
          <p> 共享数据组件本人外部的渲染逻辑 </p>
          {this.props.render(this.state) }      </div>
    );
  }
}

// 调用形式
<DataProvider render={data => (<h1>Hello {data.name}</h1>
)}/>

由此能够看到，render props 的优缺点也很显著∶

长处：数据共享、代码复用，将组件内的 state 作为 props 传递给调用者，将渲染逻辑交给调用者。
毛病：无奈在 return 语句外拜访数据、嵌套写法不够优雅

（3）Hooks 官网解释∶

Hook 是 React 16.8 的新增个性。它能够让你在不编写 class 的状况下应用 state 以及其余的 React 个性。通过自定义 hook，能够复用代码逻辑。

// 自定义一个获取订阅数据的 hook
function useSubscription() {const data = DataSource.getComments();
  return [data];
}
// 
function CommentList(props) {const {data} = props;
  const [subData] = useSubscription();
    ...
}
// 应用
<CommentList data='hello' />

以上能够看出，hook 解决了 hoc 的 prop 笼罩的问题，同时应用的形式解决了 render props 的嵌套天堂的问题。hook 的长处如下∶

应用直观；
解决 hoc 的 prop 重名问题；
解决 render props 因共享数据而呈现嵌套天堂的问题；
能在 return 之外应用数据的问题。

须要留神的是：hook 只能在组件顶层应用，不可在分支语句中应用。、

参考：前端 react 面试题具体解答

<>
  <span id="name" ref={this.spanRef}>{this.state.title}</span>
  <span>{this.spanRef.current ? '有值' : '无值'}</span>
</>

不能够，render 阶段 DOM 还没有生成，无奈获取 DOM。DOM 的获取须要在 pre-commit 阶段和 commit 阶段：

state 更新流程： 这个过程当中波及的函数：

shouldComponentUpdate: 当组件的 state 或 props 产生扭转时，都会首先触发这个生命周期函数。它会接管两个参数：nextProps, nextState——它们别离代表传入的新 props 和新的 state 值。拿到这两个值之后，咱们就能够通过一些比照逻辑来决定是否有 re-render（重渲染）的必要了。如果该函数的返回值为 false，则生命周期终止，反之持续；

留神：此办法仅作为 性能优化的形式 而存在。不要希图依附此办法来“阻止”渲染，因为这可能会产生 bug。应该 思考应用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()

componentWillUpdate：当组件的 state 或 props 产生扭转时，会在渲染之前调用 componentWillUpdate。componentWillUpdate 是 React16 废除的三个生命周期之一。过来，咱们可能心愿能在这个阶段去收集一些必要的信息（比方更新前的 DOM 信息等等），当初咱们齐全能够在 React16 的 getSnapshotBeforeUpdate 中去做这些事；
componentDidUpdate：componentDidUpdate() 会在 UI 更新后会被立刻调用。它接管 prevProps（上一次的 props 值）作为入参，也就是说在此处咱们依然能够进行 props 值比照（再次阐明 componentWillUpdate 的确鸡肋哈）。

props 更新流程： 绝对于 state 更新，props 更新后惟一的区别是减少了对 componentWillReceiveProps 的调用。对于 componentWillReceiveProps，须要晓得这些事件：

componentWillReceiveProps：它在 Component 承受到新的 props 时被触发。componentWillReceiveProps 会接管一个名为 nextProps 的参数（对应新的 props 值）。该生命周期是 React16 废除掉的三个生命周期之一。在它被废除前，能够用它来比拟 this.props 和 nextProps 来从新 setState。在 React16 中，用一个相似的新生命周期 getDerivedStateFromProps 来代替它。

this.state 通常是用来初始化 state 的，this.setState 是用来批改 state 值的。如果初始化了 state 之后再应用 this.state，之前的 state 会被笼罩掉，如果应用 this.setState，只会替换掉相应的 state 值。所以，如果想要批改 state 的值，就须要应用 setState，而不能间接批改 state，间接批改 state 之后页面是不会更新的。

相同点： 组件是 React 可复用的最小代码片段，它们会返回要在页面中渲染的 React 元素。也正因为组件是 React 的最小编码单位，所以无论是函数组件还是类组件，在应用形式和最终出现成果上都是完全一致的。

咱们甚至能够将一个类组件改写成函数组件，或者把函数组件改写成一个类组件（尽管并不举荐这种重构行为）。从使用者的角度而言，很难从应用体验上辨别两者，而且在古代浏览器中，闭包和类的性能只在极其场景下才会有显著的差异。所以，根本可认为两者作为组件是完全一致的。

不同点：

它们在开发时的心智模型上却存在微小的差别。类组件是基于面向对象编程的，它主打的是继承、生命周期等外围概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、援用通明等特点。
之前，在应用场景上，如果存在须要应用生命周期的组件，那么主推类组件；设计模式上，如果须要应用继承，那么主推类组件。但当初因为 React Hooks 的推出，生命周期概念的淡出，函数组件能够齐全取代类组件。其次继承并不是组件最佳的设计模式，官网更推崇“组合优于继承”的设计概念，所以类组件在这方面的劣势也在淡出。
性能优化上，类组件次要依附 shouldComponentUpdate 阻断渲染来晋升性能，而函数组件依附 React.memo 缓存渲染后果来晋升性能。
从上手水平而言，类组件更容易上手，从将来趋势上看，因为 React Hooks 的推出，函数组件成了社区将来主推的计划。
类组件在将来工夫切片与并发模式中，因为生命周期带来的复杂度，并不易于优化。而函数组件自身轻量简略，且在 Hooks 的根底上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的将来倒退。

setState 的第二个参数是一个可选的回调函数。这个回调函数将在组件从新渲染后执行。等价于在 componentDidUpdate 生命周期内执行。通常倡议应用 componentDidUpdate 来代替此形式。在这个回调函数中你能够拿到更新后 state 的值：

this.setState({
    key1: newState1,
    key2: newState2,
    ...
}, callback) // 第二个参数是 state 更新实现后的回调函数

具体的执行过程如下（源码级解析）：

首先调用了setState 入口函数，入口函数在这里就是充当一个散发器的角色，依据入参的不同，将其散发到不同的性能函数中去；

ReactComponent.prototype.setState = function (partialState, callback) {this.updater.enqueueSetState(this, partialState);
  if (callback) {this.updater.enqueueCallback(this, callback, 'setState');
  }
};

enqueueSetState 办法将新的 state 放进组件的状态队列里，并调用 enqueueUpdate 来解决将要更新的实例对象；

enqueueSetState: function (publicInstance, partialState) {
  // 依据 this 拿到对应的组件实例
  var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, 'setState');
  // 这个 queue 对应的就是一个组件实例的 state 数组
  var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []);
  queue.push(partialState);
  //  enqueueUpdate 用来解决以后的组件实例
  enqueueUpdate(internalInstance);
}

在 enqueueUpdate 办法中引出了一个要害的对象——batchingStrategy，该对象所具备的isBatchingUpdates 属性间接决定了当下是要走更新流程，还是应该排队期待；如果轮到执行，就调用 batchedUpdates 办法来间接发动更新流程。由此能够揣测，batchingStrategy 或者正是 React 外部专门用于管控批量更新的对象。

function enqueueUpdate(component) {ensureInjected();
  // 留神这一句是问题的要害，isBatchingUpdates 标识着以后是否处于批量创立 / 更新组件的阶段
  if (!batchingStrategy.isBatchingUpdates) {
    // 若以后没有处于批量创立 / 更新组件的阶段，则立刻更新组件
    batchingStrategy.batchedUpdates(enqueueUpdate, component);
    return;
  }
  // 否则，先把组件塞入 dirtyComponents 队列里，让它“再等等”dirtyComponents.push(component);
  if (component._updateBatchNumber == null) {component._updateBatchNumber = updateBatchNumber + 1;}
}

留神：batchingStrategy 对象能够了解为“锁管理器”。这里的“锁”，是指 React 全局惟一的 isBatchingUpdates 变量，isBatchingUpdates 的初始值是 false，意味着“以后并未进行任何批量更新操作”。每当 React 调用 batchedUpdate 去执行更新动作时，会先把这个锁给“锁上”（置为 true），表明“当初正处于批量更新过程中”。当锁被“锁上”的时候，任何须要更新的组件都只能临时进入 dirtyComponents 里排队等待下一次的批量更新，而不能随便“插队”。此处体现的“工作锁”的思维，是 React 面对大量状态依然可能实现有序分批解决的基石。

在 React 中，数据传递个别应用 props 传递数据，维持单向数据流，这样能够让组件之间的关系变得简略且可预测，然而单项数据流在某些场景中并不实用。单纯一对的父子组件传递并无问题，但要是组件之间层层依赖深刻，props 就须要层层传递显然，这样做太繁琐了。

Context 提供了一种在组件之间共享此类值的形式，而不用显式地通过组件树的逐层传递 props。

能够把 context 当做是特定一个组件树内共享的 store，用来做数据传递。简略说就是，当你不想在组件树中通过逐层传递 props 或者 state 的形式来传递数据时，能够应用 Context 来实现跨层级的组件数据传递。

JS 的代码块在执行期间，会创立一个相应的作用域链，这个作用域链记录着运行时 JS 代码块执行期间所能拜访的流动对象，包含变量和函数，JS 程序通过作用域链拜访到代码块外部或者内部的变量和函数。

如果以 JS 的作用域链作为类比，React 组件提供的 Context 对象其实就好比一个提供给子组件拜访的作用域，而 Context 对象的属性能够看成作用域上的流动对象。因为组件的 Context 由其父节点链上所有组件通过 getChildContext（）返回的 Context 对象组合而成，所以，组件通过 Context 是能够拜访到其父组件链上所有节点组件提供的 Context 的属性。

通过 connect 和 mapStateToProps 将 state 注入到组件中：

import {connect} from 'react-redux'
import {setVisibilityFilter} from '@/reducers/Todo/actions'
import Link from '@/containers/Todo/components/Link'

const mapStateToProps = (state, ownProps) => ({active: ownProps.filter === state.visibilityFilter})

const mapDispatchToProps = (dispatch, ownProps) => ({setFilter: () => {dispatch(setVisibilityFilter(ownProps.filter))
    }
})

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Link)

下面代码中，active 就是注入到 Link 组件中的状态。mapStateToProps（state，ownProps）中带有两个参数，含意是∶

state-store 治理的全局状态对象，所有都组件状态数据都存储在该对象中。
ownProps 组件通过 props 传入的参数。

reducer 到组件经验的过程：

reducer 对 action 对象解决，更新组件状态，并将新的状态值返回 store。
通过 connect（mapStateToProps，mapDispatchToProps）（Component）对组件 Component 进行降级，此时将状态值从 store 取出并作为 props 参数传递到组件。

高阶组件实现源码∶

import React from 'react'
import PropTypes from 'prop-types'

// 高阶组件 contect 
export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
    class Connect extends React.Component {
        // 通过对 context 调用获取 store
        static contextTypes = {store: PropTypes.object}

        constructor() {super()
            this.state = {allProps: {}
            }
        }

        // 第一遍需初始化所有组件初始状态
        componentWillMount() {
            const store = this.context.store
            this._updateProps()
            store.subscribe(() => this._updateProps()); // 退出_updateProps()至 store 里的监听事件列表}

        // 执行 action 后更新 props，使组件能够更新至最新状态（相似于 setState）_updateProps() {
            const store = this.context.store;
            let stateProps = mapStateToProps ?
                mapStateToProps(store.getState(), this.props) : {} // 避免 mapStateToProps 没有传入
            let dispatchProps = mapDispatchToProps ?
                mapDispatchToProps(store.dispatch, this.props) : {dispatch: store.dispatch} // 避免 mapDispatchToProps 没有传入
            this.setState({
                allProps: {
                    ...stateProps,
                    ...dispatchProps,
                    ...this.props
                }
            })
        }

        render() {return <WrappedComponent {...this.state.allProps} />
        }
    }
    return Connect
}

（1）setState() setState()用于设置状态对象，其语法如下：

setState(object nextState[, function callback])

nextState，将要设置的新状态，该状态会和以后的 state 合并
callback，可选参数，回调函数。该函数会在 setState 设置胜利，且组件从新渲染后调用。

合并 nextState 和以后 state，并从新渲染组件。setState 是 React 事件处理函数中和申请回调函数中触发 UI 更新的次要办法。

（2）replaceState() replaceState()办法与 setState()相似，然而办法只会保留 nextState 中状态，原 state 不在 nextState 中的状态都会被删除。其语法如下：

replaceState(object nextState[, function callback])

nextState，将要设置的新状态，该状态会替换以后的 state。
callback，可选参数，回调函数。该函数会在 replaceState 设置胜利，且组件从新渲染后调用。

总结： setState 是批改其中的局部状态，相当于 Object.assign，只是笼罩，不会缩小原来的状态。而 replaceState 是齐全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性缩小，那么 state 中就没有这个状态了。

能够通过以下形式将组件嵌入到一个组件中：

class MyComponent extends React.Component{render(){
        return(          
            <div>
                <h1>Hello</h1>
                <Header/>
            </div>
        );
    }
}
class Header extends React.Component{render(){
        return
            <h1>Header Component</h1>   
   };
}
ReactDOM.render(<MyComponent/>, document.getElementById('content')
);

组件状态的扭转能够因为 props 的扭转，或者间接通过 setState 办法扭转。组件取得新的状态，而后 React 决定是否应该从新渲染组件。只有组件的 state 发生变化，React 就会对组件进行从新渲染。这是因为 React 中的 shouldComponentUpdate 办法默认返回true，这就是导致每次更新都从新渲染的起因。

当 React 将要渲染组件时会执行 shouldComponentUpdate 办法来看它是否返回 true（组件应该更新，也就是从新渲染）。所以须要重写shouldComponentUpdate 办法让它依据状况返回 true 或者 false 来通知 React 什么时候从新渲染什么时候跳过从新渲染。

正文完

react.js

发表至： react.js

2022-10-19

0

关于react.js:react源码解析9diff算法

关于react.js:ReactComponent

关于react.js:React滑动条扫描图片组件tsx-less-hooks组件

关于react.js:解读官方博客React18真的来了

关于react.js:React组件之间的通信方式总结下

关于react.js:React面试八股文第二期

React.forwardRef 是什么？它有什么作用？

refs 的作用是什么，你在什么样的业务场景下应用 refs

哪些办法会触发 React 从新渲染？从新渲染 render 会做些什么？

React 的事件和一般的 HTML 事件有什么不同？

React 申明组件有哪几种办法，有什么不同？

React 组件的 state 和 props 有什么区别？

React 中什么是受控组件和非控组件？

对 componentWillReceiveProps 的了解

React 高阶组件、Render props、hooks 有什么区别，为什么要一直迭代

React 中能够在 render 拜访 refs 吗？为什么？

state 和 props 触发更新的生命周期别离有什么区别？

在 React 中组件的 this.state 和 setState 有什么区别？

类组件与函数组件有什么异同？

React 中 setState 的第二个参数作用是什么？

React setState 调用的原理

对 React context 的了解

state 是怎么注入到组件的，从 reducer 到组件经验了什么样的过程

React 中的 setState 和 replaceState 的区别是什么？

如何将两个或多个组件嵌入到一个组件中？

React 如何判断什么时候从新渲染组件？

站内搜索