专栏首页用户8771298的专栏2021react面试题附答案
原创

2021react面试题附答案

2021react面试题附答案

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

条件

State

Props

1. 从父组件中接收初始值

Yes

Yes

2. 父组件可以改变值

No

Yes

3. 在组件中设置默认值

Yes

Yes

4. 在组件的内部变化

Yes

No

5. 设置子组件的初始值

Yes

Yes

6. 在子组件的内部更改

No

Yes

7.什么是受控组件和非受控组件

  • 受状态控制的组件,必须要有onChange方法,否则不能使用 受控组件可以赋予默认值(官方推荐使用 受控组件) 实现双向数据绑定
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>)
    }
}
复制代码
  • 非受控也就意味着我可以不需要设置它的state属性,而通过ref来操作真实的DOM
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、什么是高阶组件

高阶组件不是组件,是 增强函数,可以输入一个元组件,返回出一个新的增强组件

  • 属性代理 (Props Proxy) 在我看来属性代理就是提取公共的数据和方法到父组件,子组件只负责渲染数据,相当于设计模式里的模板模式,这样组件的重用性就更高了
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 属性。

  • 用法:在父组件上定义getChildContext方法,返回一个对象,然后它的子组件就可以通过this.context属性来获取
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'));

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Js面试题__附答案

    JavaScript是客户端和服务器端脚本语言,可以插入到HTML页面中,并且是目前较热门的Web开发语言。同时,JavaScript也是面向对象编程语言。

    一墨编程学习
  • (面试题)python面试题集锦-附答案

      GIL是python的全局解释器锁,在一个进程中如果有多个线程执行,其中一个线程在执行的时候会霸占python解释器(加锁即GIL),那么其他线程就不能执行...

    py3study
  • 50道CSS面试题(附答案)

    标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+bo...

    用户1093975
  • 59道CSS面试题(附答案)

    CSS选择器的权重预示着CSS选择器样式渲染的先后顺序,元素样式渲染时,权重高的选择器样式会覆盖权重低的选择器样式。

    winty
  • 前端vue面试题,附答案

    vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉

    zz1998
  • 2020 最新java面试题附答案

    客户端发出http请求,web服务器将请求转发到servlet容器,servlet容器解析url并根据web.xml找到相对应的servlet,并将reques...

    java架构师
  • 阿里 Java 面试题汇总(附答案)

    阿里可以说是互联网java公司的标杆了,这份面试题包含了Java基础(JavaSE基础)常考知识点,这些基础知识题的答案也都还不错。除了这个还有集合Hashta...

    程序员小强
  • 50道JavaScript基础面试题(附答案)

    1 介绍JavaScript的基本数据类型 Number、String 、Boolean 、Null、Undefined Object 是 JavaScrip...

    web前端学习圈
  • 40道+JavaScript基础面试题(附答案)

    来源 | https://segmentfault.com/a/1190000015288700

    winty
  • Flink高频面试题,附答案解析

    Checkpoint容错机制是Flink可靠性的基石,可以保证Flink集群在某个算子因为某些原因(如 异常退出)出现故障时,能够将整个应用流图的状态恢复到故障...

    五分钟学大数据
  • iOS基础问答面试题连载(三)-附答案

    2016-11-2319:56:15 发表评论 3,614℃热度 1.请简单说明多线程技术的优点和缺点? 2.请简单说明线程和进程,以及他们之间的关系? ...

    timhbw
  • iOS基础问答面试题连载(二)-附答案

    2016-11-2120:41:52 发表评论 7℃热度 1.xcode5和xcode7区别? 2.pch文件原理? 3.UIApplication常见...

    timhbw
  • python自动化笔试面试题(附带答案)

    答:Selenium是一个开源的web自动化测试框架,支持多种编程语言开发自动化测试脚本,支持跨浏览器平台进行测试

    用户7886150
  • 面试题答案

    get:GET是通过URL提交数据,因此GET可提交的数据量就跟URL所能达到的最大长度有直接关系

    学长冷月
  • Redis面试题汇总(附答案),面试突击专用

    Redis是一个支持持久化的内存数据库,通过持久化机制把内存中的数据同步到硬盘文件来保证数据持久化。当Redis重启后通过把硬盘文件重新加载到内存,就能达到恢复...

    程序员白楠楠
  • 【面试】1084- 前端经典面试题60道,附答案!

    今天分享一篇比较全的面试题,包含 JS、CSS、React、网络、浏览器、程序题等。

    pingan8787
  • 【前端面试题】04—33道基础CSS3面试题(附答案)

    伴随着大量让人欣喜的功能加入HTML5,CSS3也同样为我们带来了更加绚丽的样式效果。

    前端达人
  • 49道spring面试题整理,附带答案

    使用Spring: 第一是使用它的IOC功能,在解耦上达到了配置级别。 第二是使用它对数据库访问事务相关的封装。 第三就是各种其他组件与Spring的融合,在S...

    李红
  • 49道spring面试题整理,附带答案

    使用Spring:第一是使用它的IOC功能,在解耦上达到了配置级别。第二是使用它对数据库访问事务相关的封装。第三就是各种其他组件与Spring的融合,在Spri...

    李红

扫码关注云+社区

领取腾讯云代金券