React必知必會的35個面試題

【相關專題推薦：react面試題（2020）】

問題1：什麼是虛擬DOM？

主題: React
難度: ⭐

#虛擬 DOM (VDOM)是真實 DOM 在記憶體中的表示。 UI 的表示形式保存在記憶體中，並與實際的 DOM 同步。這是一個發生在渲染函數被呼叫和元素在螢幕上顯示之間的步驟，整個過程被稱為調和。

問題2：類別元件和函數元件之間的差異是啥？

主題: React
難度: ⭐⭐

• #類別元件可以使用其他特性，如狀態state#和生命週期鉤子。
• 當元件只是接收 props 渲染到頁面時，就是無狀態元件，就屬於函數元件，也稱為啞元件或展示元件。

函數元件和類別元件當然是有差別的，而且函數元件的效能比類別元件的效能要高，因為類別元件使用的時候要實例化，而函數元件直接執行函數取返回結果即可。為了提高性能，盡量使用函數組件。

##有

問題 3：React 中 refs 幹嘛用的？

主題: React
難度: ⭐⭐

#Refs 提供了一個存取在render方法中建立的DOM節點或React 元素的方法。在典型的資料流中，props 是父子元件互動的唯一方式，想要修改子元件，需要使用新的pros重新渲染它。凡事有例外，某些情況下咱們需要在典型資料流外，強制修改子代，這個時候可以使用 Refs。

咱們可以在元件中加入一個 ref 屬性來使用，該屬性的值是一個回呼函數，接收作為其第一個參數的底層 DOM 元素或元件的掛載實例。

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type=&#39;text&#39;
          ref={(input) => this.input = input} />
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

請注意，input 元素有一個ref屬性，它的值是一個函數。此函數接收輸入的實際 DOM 元素，然後將其放在實例上，這樣就可以在 handleSubmit 函數內部存取它。

經常被誤解的只有在類別元件中才能使用 refs，但是refs也可以透過利用 JS 中的閉包與函數元件一起使用。

function CustomForm ({handleSubmit}) {
  let inputElement
  return (
    <form onSubmit={() => handleSubmit(inputElement.value)}>
      <input
        type=&#39;text&#39;
        ref={(input) => inputElement = input} />
      <button type=&#39;submit&#39;>Submit</button>
    </form>
  )
}

問題4：在React 中如何處理事件

#主題: React
難度: ⭐⭐

為了解決跨瀏覽器的相容性問題，SyntheticEvent 實例將被傳遞給你的事件處理函數，SyntheticEvent是React 跨瀏覽器的瀏覽器原生事件包裝器，它還擁有和瀏覽器原生事件相同的接口，包括stopPropagation() 和preventDefault()。

比較有趣的是，React 其實不會將事件附加到子節點本身。 React 使用單一事件偵聽器偵聽頂層的所有事件。這對效能有好處，也意味著 React 在更新 DOM 時不需要追蹤事件監聽器。

問題 5：state 和 props 差別是啥？

主題: React
難度: ⭐⭐

#props和state是普通的 JS 物件。雖然它們都包含影響渲染輸出的訊息，但是它們在元件方面的功能是不同的。即

• state 是元件自己管理數據，控制自己的狀態，可變；
• ##props 是外部傳入的數據參數，不可變；
沒有
• state的叫做無狀態元件，有state的叫做有狀態元件；
多用
• props ，少用state，也就是多寫無狀態元件。

問題6：如何建立refs

主題: React

難度: ⭐⭐

Refs 是使用

React .createRef() 建立的，並透過ref 屬性附加到React 元素。在建構元件時，通常會將 Refs 指派給實例屬性，以便可以在整個元件中引用它們。

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

或這樣用：

class UserForm extends Component {
  handleSubmit = () => {
    console.log("Input Value is: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type=&#39;text&#39;
          ref={(input) => this.input = input} /> // Access DOM input in handle submit
        <button type=&#39;submit&#39;>Submit</button>
      </form>
    )
  }
}

問題 7：什麼是高階元件？

主題: React

難度: ⭐⭐

#高階元件(HOC)是接受一個元件並傳回一個新元件的函數。基本上，這是一個模式，是從React 的組合特性中衍生出來的，稱其為純元件，因為它們可以接受任何動態提供的子元件，但不會修改或複製輸入元件中的任何行為。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可以用於以下許多用例

程式碼重複使用、邏輯和引導抽象
• 渲染劫持
• state 抽象和操作
• props 處理

問題8：在建構子呼叫super 並將props 作為參數傳入的作用是啥？

主題: React

難度: ⭐⭐

在呼叫

super() 方法之前，子類別建構子無法使用this引用，ES6 子類別也是如此。將props 參數傳遞給super() 呼叫的主要原因是在子建構函式中能夠透過this.props來取得傳入的props 。

傳遞 props

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);  // { name: 'sudheer',age: 30 }
  }
}

沒傳遞 props

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 但是 Props 参数仍然可用
    console.log(props); // Prints { name: 'sudheer',age: 30 }
  }

  render() {
    // 构造函数外部不受影响
    console.log(this.props) // { name: 'sudheer',age: 30 }
  }
}

上面範例揭示了一點。

props 的行為只有在建構子中是不同的，在建構子之外也是一樣的。

問題 9：什麼是控制元件？

主題: React

難度: ⭐⭐⭐

在HTML 中，表單元素如

、和<select><code>通常維護自己的狀態，並根據使用者輸入進行更新。當使用者提交表單時，來自上述元素的值將隨表單一起發送。 </code><p>而 React 的工作方式则不同。包含表单的组件将跟踪其状态中的输入值，并在每次回调函数(例如<code>onChange</code>)触发时重新渲染组件，因为状态被更新。以这种方式由 React 控制其值的输入表单元素称为<strong>受控组件</strong>。</p> <h3 id="strong-问题-如何-React-createElement-strong"><strong>问题 10：如何 React.createElement ？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p><strong>问题：</strong></p><pre class='brush:php;toolbar:false;'>const element = ( <h1 className="greeting"> Hello, world! </h1> )</pre><p>上述代码如何使用 <code>React.createElement</code> 来实现:</p><pre class='brush:php;toolbar:false;'>const element = React.createElement( &#39;h1&#39;, {className: &#39;greeting&#39;}, &#39;Hello, world!&#39; );</pre><h3 id="strong-问题-讲讲什么是-JSX-strong"><strong>问题 11：讲讲什么是 JSX ？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>当 <strong>Facebook</strong> 第一次发布 React 时，他们还引入了一种新的 JS 方言 <code>JSX</code>，将原始 HTML 模板嵌入到 JS 代码中。JSX 代码本身不能被浏览器读取，必须使用<code>Babel</code>和<code>webpack</code>等工具将其转换为传统的JS。很多开发人员就能无意识使用 JSX，因为它已经与 React 结合在一直了。</p><pre class='brush:php;toolbar:false;'>class MyComponent extends React.Component { render() { let props = this.props; return ( <p className="my-component"> <a href={props.url}>{props.name}</a> </p> ); } }</pre><h3 id="strong-问题-根据下面定义的代码-可以找出存在的两个问题吗-strong"><strong>问题 12：根据下面定义的代码，可以找出存在的两个问题吗 ？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>请看下面的代码：</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/212/202/652/1594195545605305.png?x-oss-process=image/resize,p_40" class="lazy" title="1594195545605305.png" alt="React必知必會的35個面試題"></p> <p>答案：</p> <p>1.在构造函数没有将 <code>props</code> 传递给 <code>super</code>，它应该包括以下行</p><pre class='brush:php;toolbar:false;'>constructor(props) { super(props); // ... }</pre><p>2.事件监听器(通过<code>addEventListener()</code>分配时)的作用域不正确，因为 ES6 不提供自动绑定。因此，开发人员可以在构造函数中重新分配<code>clickHandler</code>来包含正确的绑定:</p><pre class='brush:php;toolbar:false;'>constructor(props) { super(props); this.clickHandler = this.clickHandler.bind(this); // ... }</pre><h3 id="strong-问题-为什么不直接更新-code-state-code-呢-strong"><strong>问题 13：为什么不直接更新 <code>state</code> 呢 ?</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>如果试图直接更新 <code>state</code> ，则不会重新渲染组件。</p><pre class='brush:php;toolbar:false;'> // 错误 This.state.message = &#39;Hello world&#39;;</pre><p>需要使用<code>setState()</code>方法来更新 <code>state</code>。它调度对组件<code>state</code>对象的更新。当<code>state</code>改变时，组件通过重新渲染来响应：</p><pre class='brush:php;toolbar:false;'>// 正确做法 This.setState({message: ‘Hello World’});</pre><h3 id="strong-问题-React-组件生命周期有哪些不同阶段-strong"><strong>问题 14：React 组件生命周期有哪些不同阶段？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>在组件生命周期中有四个不同的阶段：</p> <ol> <li> <strong>Initialization</strong>：在这个阶段，组件准备设置初始化状态和默认属性。</li> <li> <strong>Mounting</strong>：react 组件已经准备好挂载到浏览器 DOM 中。这个阶段包括<code>componentWillMount</code>和<code>componentDidMount</code>生命周期方法。</li> <li> <strong>Updating</strong>：在这个阶段，组件以两种方式更新，发送新的 props 和 state 状态。此阶段包括<code>shouldComponentUpdate</code>、<code>componentWillUpdate</code>和<code>componentDidUpdate</code>生命周期方法。</li> <li> <strong>Unmounting</strong>：在这个阶段，组件已经不再被需要了，它从浏览器 DOM 中卸载下来。这个阶段包含 <code>componentWillUnmount</code> 生命周期方法。</li> </ol> <p>除以上四个常用生命周期外，还有一个错误处理的阶段：</p> <p><strong>Error Handling</strong>：在这个阶段，不论在渲染的过程中，还是在生命周期方法中或是在任何子组件的构造函数中发生错误，该组件都会被调用。这个阶段包含了 <code>componentDidCatch</code> 生命周期方法。</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/604/252/914/1594195555359536.png?x-oss-process=image/resize,p_40" class="lazy" title="1594195555359536.png" alt="React必知必會的35個面試題"></p> <h3 id="strong-问题-React-的生命周期方法有哪些-strong"><strong>问题 15：React 的生命周期方法有哪些？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <ul> <li> <code>componentWillMount</code>:在渲染之前执行，用于根组件中的 App 级配置。</li> <li> <code>componentDidMount</code>：在第一次渲染之后执行，可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。</li> <li> <code>componentWillReceiveProps</code>：在初始化<code>render</code>的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染</li> <li> <code>shouldComponentUpdate</code>：确定是否更新组件。默认情况下，它返回<code>true</code>。如果确定在 <code>state</code> 或 <code>props</code> 更新后组件不需要在重新渲染，则可以返回<code>false</code>，这是一个提高性能的方法。</li> <li> <code>componentWillUpdate</code>：在<code>shouldComponentUpdate</code>返回 <code>true</code> 确定要更新组件之前件之前执行。</li> <li> <code>componentDidUpdate</code>：它主要用于更新DOM以响应<code>props</code>或<code>state</code>更改。</li> <li> <code>componentWillUnmount</code>：它用于取消任何的网络请求，或删除与组件关联的所有事件监听器。</li> </ul> <h3 id="strong-问题-这三个点-在-React-干嘛用的-strong"><strong>问题 16：这三个点(...)在 React 干嘛用的？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p><code>...</code> 在React（使用JSX）代码中做什么？它叫什么？</p><pre class='brush:php;toolbar:false;'><Modal {...this.props} title=&#39;Modal heading&#39; animation={false}/></pre><p>这个叫扩展操作符号或者展开操作符，例如，如果<code>this.props</code>包含<code>a：1</code>和<code>b：2</code>，则</p><pre class='brush:php;toolbar:false;'><Modal {...this.props} title=&#39;Modal heading&#39; animation={false}></pre><p>等价于下面内容：</p><pre class='brush:php;toolbar:false;'><Modal a={this.props.a} b={this.props.b} title=&#39;Modal heading&#39; animation={false}></pre><p>扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便，在更新<code>state</code> 咱们就经常这么做：</p><pre class='brush:php;toolbar:false;'>this.setState(prevState => { return {foo: {...prevState.foo, a: "updated"}}; });</pre><h3 id="strong-问题-使用-React-Hooks-好处是啥-strong"><strong>问题 17：使用 React Hooks 好处是啥？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>首先，Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 <code>props</code> 的负担。<code>Hooks</code> 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。</p> <p>Hooks 在类中不起作用，通过使用它们，咱们可以完全避免使用生命周期方法，例如 <code>componentDidMount</code>、<code>componentDidUpdate</code>、<code>componentWillUnmount</code>。相反，使用像<code>useEffect</code>这样的内置钩子。</p> <h3 id="strong-问题-什么是-React-Hooks-strong"><strong>问题 18：什么是 React Hooks？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p><strong>Hooks</strong>是 React 16.8 中的新添加内容。它们允许在不编写类的情况下使用<code>state</code>和其他 React 特性。使用 Hooks，可以从组件中提取有状态逻辑，这样就可以独立地测试和重用它。Hooks 允许咱们在不改变组件层次结构的情况下重用有状态逻辑，这样在许多组件之间或与社区共享 Hooks 变得很容易。</p> <h3 id="strong-问题-React-中的-code-useState-code-是什么-strong"><strong>问题 19：React 中的 <code>useState()</code> 是什么？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>下面说明<code>useState(0)</code>的用途：</p><pre class='brush:php;toolbar:false;'>... const [count, setCounter] = useState(0); const [moreStuff, setMoreStuff] = useState(...); ... const setCount = () => { setCounter(count + 1); setMoreStuff(...); ... };</pre><p><code>useState</code> 是一个内置的 React Hook。<code>useState(0)</code> 返回一个元组，其中第一个参数<code>count</code>是计数器的当前状态，<code>setCounter</code> 提供更新计数器状态的方法。</p> <p>咱们可以在任何地方使用<code>setCounter</code>方法更新计数状态-在这种情况下，咱们在<code>setCount</code>函数内部使用它可以做更多的事情，使用 Hooks，能够使咱们的代码保持更多功能，还可以避免过多使用基于类的组件。</p> <h3 id="strong-问题-React-中的StrictMode-严格模式-是什么-strong"><strong>问题 20：React 中的StrictMode(严格模式)是什么？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>React 的<code>StrictMode</code>是一种辅助组件，可以帮助咱们编写更好的 react 组件，可以使用<code><strictmode></strictmode></code>包装一组组件，并且可以帮咱们以下检查：</p> <ul> <li>验证内部组件是否遵循某些推荐做法，如果没有，会在控制台给出警告。</li> <li>验证是否使用的已经废弃的方法，如果有，会在控制台给出警告。</li> <li>通过识别潜在的风险预防一些副作用。</li> </ul> <h3 id="strong-问题-为什么类方法需要绑定到类实例-strong"><strong>问题 21：为什么类方法需要绑定到类实例？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>在 JS 中，<code>this</code> 值会根据当前上下文变化。在 React 类组件方法中，开发人员通常希望 <code>this</code> 引用组件的当前实例，因此有必要将这些方法绑定到实例。通常这是在构造函数中完成的:</p><pre class='brush:php;toolbar:false;'>class SubmitButton extends React.Component { constructor(props) { super(props); this.state = { isFormSubmitted: false }; this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit() { this.setState({ isFormSubmitted: true }); } render() { return ( <button onClick={this.handleSubmit}>Submit</button> ) } }</pre><h3 id="strong-问题-什么是-prop-drilling-如何避免-strong"><strong>问题 22：什么是 prop drilling，如何避免？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>在构建 React 应用程序时，在多层嵌套组件来使用另一个嵌套组件提供的数据。最简单的方法是将一个 <code>prop</code> 从每个组件一层层的传递下去，从源组件传递到深层嵌套组件，这叫做<strong>prop drilling</strong>。</p> <p><code>prop drilling</code>的主要缺点是原本不需要数据的组件变得不必要地复杂，并且难以维护。</p> <p>为了避免<code>prop drilling</code>，一种常用的方法是使用<strong>React Context</strong>。通过定义提供数据的<code>Provider</code>组件，并允许嵌套的组件通过<code>Consumer</code>组件或<code>useContext</code> Hook 使用上下文数据。</p> <h3 id="strong-问题-描述-Flux-与-MVC-strong"><strong>问题 23：描述 Flux 与 MVC？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <p>传统的 MVC 模式在分离数据(Model)、UI(View和逻辑(Controller)方面工作得很好，但是 MVC 架构经常遇到两个主要问题:</p> <p><strong>数据流不够清晰</strong>:跨视图发生的级联更新常常会导致混乱的事件网络，难于调试。</p> <p><strong>缺乏数据完整性</strong>:模型数据可以在任何地方发生突变，从而在整个UI中产生不可预测的结果。</p> <p>使用 Flux 模式的复杂用户界面不再遭受级联更新，任何给定的React 组件都能够根据 <code>store</code> 提供的数据重建其状态。Flux 模式还通过限制对共享数据的直接访问来加强数据完整性。</p> <h3 id="strong-问题-受控组件和非受控组件区别是啥-strong"><strong>问题 24：受控组件和非受控组件区别是啥？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐</blockquote> <ul> <li> <strong>受控组件</strong>是 React 控制中的组件，并且是表单数据真实的唯一来源。</li> <li>非受控组件是由 DOM 处理表单数据的地方，而不是在 React 组件中。</li> </ul> <p>尽管非受控组件通常更易于实现，因为只需使用<code>refs</code>即可从 DOM 中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。</p> <p>这样做的主要原因是受控组件支持即时字段验证，允许有条件地禁用/启用按钮，强制输入格式。</p> <h3 id="strong-问题-这段代码有什么问题吗-strong"><strong>问题 25：这段代码有什么问题吗？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p>这段代码有什么问题:</p><pre class='brush:php;toolbar:false;'>this.setState((prevState, props) => { return { streak: prevState.streak + props.count } })</pre><p><strong>答案：</strong></p> <p>没有什么问题。这种方式很少被使用，咱们可以将一个函数传递给<code>setState</code>，该函数接收上一个 <code>state</code> 的值和当前的<code>props</code>，并返回一个新的状态，如果咱们需要根据以前的状态重新设置状态，推荐使用这种方式。</p> <h3 id="strong-问题-什么是-React-Context-strong"><strong>问题 26：什么是 React Context?</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p><code>Context</code> 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 <code>props</code> 属性。</p> <h3 id="strong-问题-什么是-React-Fiber-strong"><strong>问题 27：什么是 React Fiber?</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p><strong>Fiber</strong> 是 React 16 中新的协调引擎或重新实现核心算法。它的主要目标是支持虚拟DOM的增量渲染。<strong>React Fiber</strong> 的目标是提高其在动画、布局、手势、暂停、中止或重用等方面的适用性，并为不同类型的更新分配优先级，以及新的并发原语。</p> <p>React Fiber 的目标是增强其在动画、布局和手势等领域的适用性。它的主要特性是增量渲染:能够将渲染工作分割成块，并将其分散到多个帧中。</p> <h3 id="strong-问题-如何在-ReactJS-的-Props上应用验证-strong"><strong>问题 28：如何在 ReactJS 的 Props上应用验证？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p>当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 <code>props</code>，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 <code>props</code> 用 <code>isRequired</code>定义的。</p> <p>下面是一组预定义的 prop 类型:</p> <ul> <li>React.PropTypes.string</li> <li>React.PropTypes.number</li> <li>React.PropTypes.func</li> <li>React.PropTypes.node</li> <li>React.PropTypes.bool</li> </ul> <p>例如，咱们为用户组件定义了如下的<code>propTypes</code></p><pre class='brush:php;toolbar:false;'>import PropTypes from &#39;prop-types&#39;; class User extends React.Component { render() { return ( <h1 id="Welcome-nbsp-this-props-name">Welcome, {this.props.name}</h1> <h2>Age, {this.props.age} ); } } User.propTypes = { name: PropTypes.string.isRequired, age: PropTypes.number.isRequired };</pre><h3 id="strong-问题-在-React-中使用构造函数和-getInitialState-有什么区别-strong"><strong>问题 29：在 React 中使用构造函数和 getInitialState 有什么区别？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p>构造函数和<code>getInitialState</code>之间的区别就是<code>ES6</code>和<code>ES5</code>本身的区别。在使用<code>ES6</code>类时，应该在构造函数中初始化<code>state</code>，并在使用<code>React.createClass</code>时定义<code>getInitialState</code>方法。</p><pre class='brush:php;toolbar:false;'>class MyComponent extends React.Component { constructor(props) { super(props); this.state = { /* initial state */ }; } }</pre><p>等价于：</p><pre class='brush:php;toolbar:false;'>var MyComponent = React.createClass({ getInitialState() { return { /* initial state */ }; }, });</pre><h3 id="strong-问题-如何有条件地向-React-组件添加属性-strong"><strong>问题 30：如何有条件地向 React 组件添加属性？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p>对于某些属性，React 非常聪明，如果传递给它的值是虚值，可以省略该属性。例如：</p><pre class='brush:php;toolbar:false;'>var InputComponent = React.createClass({ render: function() { var required = true; var disabled = false; return ( <input type="text" disabled={disabled} required={required} /> ); } });</pre><p>渲染结果：</p><pre class='brush:php;toolbar:false;'><input type="text" required></pre><p>另一种可能的方法是：</p><pre class='brush:php;toolbar:false;'>var condition = true; var component = ( <p value="foo" { ...( condition && { disabled: true } ) } /> );</pre><h3 id="strong-问题-Hooks会取代-code-render-props-code-和高阶组件吗-strong"><strong>问题 31：Hooks会取代 <code>render props</code> 和高阶组件吗？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p>通常，<code>render props</code>和高阶组件仅渲染一个子组件。React团队认为，Hooks 是服务此用例的更简单方法。</p> <p>这两种模式仍然有一席之地(例如，一个虚拟的 <code>scroller</code> 组件可能有一个 <code>renderItem prop</code>，或者一个可视化的容器组件可能有它自己的 DOM 结构)。但在大多数情况下，Hooks 就足够了，可以帮助减少树中的嵌套。</p> <h3 id="strong-问题-如何避免组件的重新渲染-strong"><strong>问题 32：如何避免组件的重新渲染？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐</blockquote> <p>React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：</p> <ul> <li> <code>React.memo()</code>:这可以防止不必要地重新渲染函数组件</li> <li> <code>PureComponent</code>:这可以防止不必要地重新渲染类组件</li> </ul> <p>这两种方法都依赖于对传递给组件的<code>props</code>的浅比较，如果 <code>props</code> 没有改变，那么组件将不会重新渲染。虽然这两种工具都非常有用，但是浅比较会带来额外的性能损失，因此如果使用不当，这两种方法都会对性能产生负面影响。</p> <p>通过使用 <strong>React Profiler</strong>，可以在使用这些方法前后对性能进行测量，从而确保通过进行给定的更改来实际改进性能。</p> <h3 id="strong-问题-什么是纯函数-strong"><strong>问题 33：什么是纯函数？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐⭐</blockquote> <p>纯函数是不依赖并且不会在其作用域之外修改变量状态的函数。本质上，纯函数始终在给定相同参数的情况下返回相同结果。</p> <h3 id="strong-问题-当调用-code-setState-code-时-React-code-render-code-是如何工作的-strong"><strong>问题 34：当调用<code>setState</code>时，React <code>render</code> 是如何工作的？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐⭐</blockquote> <p>咱们可以将"<code>render</code>"分为两个步骤：</p> <ol> <li>虚拟 DOM 渲染:当<code>render</code>方法被调用时，它返回一个新的组件的虚拟 DOM 结构。当调用<code>setState()</code>时，<code>render</code>会被再次调用，因为默认情况下<code>shouldComponentUpdate</code>总是返回<code>true</code>，所以默认情况下 React 是没有优化的。</li> <li>原生 DOM 渲染:React 只会在虚拟DOM中修改真实DOM节点，而且修改的次数非常少——这是很棒的React特性，它优化了真实DOM的变化，使React变得更快。</li> </ol> <h3 id="strong-问题-如何避免在React重新绑定实例-strong"><strong>问题 35：如何避免在React重新绑定实例？</strong></h3> <blockquote>主题: React<br>难度: ⭐⭐⭐⭐⭐</blockquote> <p>有几种常用方法可以避免在 React 中绑定方法：</p> <p>1.将事件处理程序定义为内联箭头函数</p><pre class='brush:php;toolbar:false;'>class SubmitButton extends React.Component { constructor(props) { super(props); this.state = { isFormSubmitted: false }; } render() { return ( <button onClick={() => { this.setState({ isFormSubmitted: true }); }}>Submit</button> ) } }</pre><p>2.使用箭头函数来定义方法：</p><pre class='brush:php;toolbar:false;'>class SubmitButton extends React.Component { state = { isFormSubmitted: false } handleSubmit = () => { this.setState({ isFormSubmitted: true }); } render() { return ( <button onClick={this.handleSubmit}>Submit</button> ) } }</pre><p>3.使用带有 Hooks 的函数组件</p><pre class='brush:php;toolbar:false;'>const SubmitButton = () => { const [isFormSubmitted, setIsFormSubmitted] = useState(false); return ( <button onClick={() => { setIsFormSubmitted(true); }}>Submit</button> ) };</pre><blockquote>本文转载自：https://segmentfault.com/a/1190000020912300</blockquote> <p>相关教程推荐：<a href="http://www.php.cn/course/list/21.html" target="_blank">React视频教程</a></p></select>

區別	函數元件	類別元件
是否有this	沒有	有
#是否有生命週期	沒有	有
有沒有狀態state	#沒有

以上是React必知必會的35個面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！