必须要会的 React 面试题
React 视频教程系列
React 实战：CNode 视频教程
完整教程目录：点击查看
React 经典教程-从入门到精通
完整教程目录：点击查看
最新最全前端毕设项目（小程序+VUE+Noed+React+uni app+Express+Mongodb）
完整教程目录：点击查看
2021 前端 React 精品教程
完整教程目录：点击查看
1. 你理解“在 React 中，一切都是组件”这句话。
组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。
2. 解释 React 中 render() 的目的。
每个 React 组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。
3. 如何将两个或多个组件嵌入到一个组件中？
可以通过以下方式将组件嵌入到一个组件中：
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'));
复制代码
4. 什么是 Props?
Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。
5. React 中的状态是什么？它是如何使用的？
状态是 React 组件的核心，是数据的来源，必须尽可能简单。基本上状态是确定组件呈现和行为的对象。与 props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。
6. 区分状态和 props
7.什么是受控组件和非受控组件
class Input extends Component{ constructor(){ super(); this.state = {val:'100'} } handleChange = (e) =>{ //e是事件源 let val = e.target.value; this.setState({val}); }; render(){ return (<div> <input type="text" value={this.state.val} onChange={this.handleChange}/> {this.state.val} </div>) }}复制代码
复制代码
class Sum extends Component{ constructor(){ super(); this.state = {result:''} } //通过ref设置的属性 可以通过this.refs获取到对应的dom元素 handleChange = () =>{ let result = this.refs.a.value + this.b.value; this.setState({result}); }; render(){ return ( <div onChange={this.handleChange}> <input type="number" ref="a"/> {/*x代表的真实的dom,把元素挂载在了当前实例上*/} <input type="number" ref={(x)=>{ this.b = x; }}/> {this.state.result} </div> ) }}
复制代码
8.什么是状态提升
使用 react 经常会遇到几个组件需要共用状态数据的情况。这种情况下，我们最好将这部分共享的状态提升至他们最近的父组件当中进行管理。我们来看一下具体如何操作吧。
import React from 'react'class Child_1 extends React.Component{ constructor(props){ super(props) } render(){ return ( <div> <h1>{this.props.value+2}</h1> </div> ) }}class Child_2 extends React.Component{ constructor(props){ super(props) } render(){ return ( <div> <h1>{this.props.value+1}</h1> </div> ) }}class Three extends React.Component { constructor(props){ super(props) this.state = { txt:"牛逼" } this.handleChange = this.handleChange.bind(this) } handleChange(e){ this.setState({ txt:e.target.value }) } render(){ return ( <div> <input type="text" value={this.state.txt} onChange={this.handleChange}/> <p>{this.state.txt}</p> <Child_1 value={this.state.txt}/> <Child_2 value={this.state.txt}/> </div> ) }}export default Three
复制代码
9、什么是高阶组件
高阶组件不是组件，是 增强函数，可以输入一个元组件，返回出一个新的增强组件
function proxyHoc(WrappedComponent) { return class extends React.Component { render() { const newProps = { count: 1 } return <WrappedComponent {...this.props} {...newProps} /> } }}复制代码
复制代码
const MyContainer = (WrappedComponent)=>{ return class extends WrappedComponent { render(){ return super.render(); } }}
复制代码
10.什么是上下文 Context
Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
import React,{Component} from 'react';import ReactDOM from 'react-dom';import PropTypes from 'prop-types';class Header extends Component{ render() { return ( <div> <Title/> </div> ) }}class Title extends Component{ static contextTypes={ color:PropTypes.string } render() { return ( <div style={{color:this.context.color}}> Title </div> ) }}class Main extends Component{ render() { return ( <div> <Content> </Content> </div> ) }}class Content extends Component{ static contextTypes={ color: PropTypes.string, changeColor:PropTypes.func } render() { return ( <div style={{color:this.context.color}}> Content <button onClick={()=>this.context.changeColor('green')}>绿色</button> <button onClick={()=>this.context.changeColor('orange')}>橙色</button> </div> ) }}class Page extends Component{ constructor() { super(); this.state={color:'red'}; } static childContextTypes={ color: PropTypes.string, changeColor:PropTypes.func } getChildContext() { return { color: this.state.color, changeColor:(color)=>{ this.setState({color}) } } } render() { return ( <div> <Header/> <Main/> </div> ) }}ReactDOM.render(<Page/>,document.querySelector('#root'));
复制代码
评论