必须要会的50个React面试题(5)

可以使用 export 和 import 属性来模块化代码。它们有助于在不同的文件中单独编写组件。

//ChildComponent.jsx 
export default class ChildComponent extends React.Component { 
    render() { 
        return(            
              <div> 
                  <h1>This is a child component</h1> 
              </div> 
        ); 
    } 
} 
  
//ParentComponent.jsx 
import ChildComponent from './childcomponent.js'; 
class ParentComponent extends React.Component {     
    render() {         
        return(            
             <div>                
                <App />           
             </div>        
        );   
    } 
} 

28. 如何在 React 中创建表单

React 表单类似于 HTML 表单。但是在 React 中，状态包含在组件的 state 属性中，并且只能通过 setState() 更新。因此元素不能直接更新它们的状态，它们的提交是由 JavaScript 函数处理的。此函数可以完全访问用户输入到表单的数据。

handleSubmit(event) { 
    alert('A name was submitted: ' + this.state.value); 
    event.preventDefault(); 
} 
  
render() { 
    return (         
        <form onSubmit={this.handleSubmit}> 
            <label> 
                Name: 
                <input type="text" value={this.state.value} onChange={this.handleSubmit} /> 
            </label> 
            <input type="submit" value="Submit" /> 
        </form> 
    ); 
} 

29. 你对受控组件和非受控组件了解多少？

30. 什么是高阶组件（HOC）？

高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。

31. 你能用HOC做什么？

HOC可用于许多任务，例如：

• 代码重用，逻辑和引导抽象
• 渲染劫持
• 状态抽象和控制
• Props 控制

32. 什么是纯组件？

纯（Pure） 组件是可以编写的最简单、最快的组件。它们可以替换任何只有 render() 的组件。这些组件增强了代码的简单性和应用的性能。

33. React 中 key 的重要性是什么？

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

React Redux

34. MVC框架的主要问题是什么？

（编辑：ASP站长网）