react常用面试题再也不用担心面试被pass掉

Posted 2021-07-18 老张在线敲代码

1、react如何实现数据双向邦定? 现有一个input和一个span,要求使用代码实现input输入span可以直接显示，写出核心代码

react通过onChange事件进行监听来获取value值，通过setState来实现数据双向邦定。

    this.state={obj:{name:'',age:''}}
    setForm(e){
        let name=e.target.name;
        let value=e.target.value;
        const obj=this.state.obj;
        obj[name]=value;
        this.setState({
        	obj,
        })
    }
    <input type='text' name='name' value={name} placeholder='请输入名字'/>
	<input type='text' name='age' value={age} placeholder='请输入年龄'/>

2. 一个父组件，一个子组件，如何在子组件增加一个事件来个设置父组件的state值？

//父组件
import Son from "./Son"
this.state={
    res:""
}
setPar=(n)=>{
    this.setState({
        res:n
    })
}
<Son setPar={this.setPar}/>
//子组件
constructor(props){
    super(poprs)
}
_set=()=>{
    this.props.setPar("666")
}
<div onClick={this._set}></div>

3. react中props 的使用场景有哪些，写出4种及以上？除了props还可能使用什么方法实现数据传递，怎么实现？

①直接使用它的数据类型(父传子)
②props.children 接收父组件(闭合组件)传入的数据
③子传父用callback函数
④props接收组件
除了props还可以使用context,mobx,redux方法实现数据传递；
⑴先创建共享的上下文对象，
⑵根组件用context.Provider作上下文组件数据提供者
⑶数据的使用者用context.Consumer接收，Consumer里面必须是一个带返回值的函数

4. 用过es6吗？用过哪些？到少说出6个以上！

import,let,const,...,map,export,箭头函数等；

5. React组件的几种写法？分别是什么，并说出他们的区别？类组件中的state与setState如何在函数组件中使用hooks如何表现？

两种写法，分别是无状态组件(函数组件)和类组件；
区别：函数组件没有state，没有生命周期，没有react特性，函数组件直接return渲染，函数组件使用参数传递的方式进行props传递；类组件用有react特性，类组件用render，return 渲染。

hooks写法：const [value,setValue]=useState();

6. React中事件this邦定的实现方法有哪些?

①在constructor中绑定this
②在调用时直接绑定.bind(this)
③函数直接以箭头函数形式
④调用时用箭头函数形式

7. vue、react打包的项目自定义路由是否可以正常使用？如果不能,我们需要做什么？

一级目录可以，二级不行，需要在.env文件中配置PUBLIC_URL进行配置

8. html标签有哪几个具有默认行为，如何在react中阻止默认行为？

具有默认行为的标签：a，input type为submit类型，reset 阻止默认行为：e.preventDefault()

9. React组件生命周期的阶段是什么？常用生命周期方法有哪些？

①挂载阶段

• constructor
• render
• componentDidMount

②更新阶段

• static getDerivedStateFromProps或者compoentDidUpdata
• shouldComponentUpdate
• render
• componentDidUpdate

③卸载阶段

• componentWillUnmount 常用的生命周期：componentDidMount,shouldComponentUpdata

10. 已知对象obj,ajax返回一个后如何合并原有对象，使用至少两种方法实现！

 {...obj,...ajax}   Object.assign(obj,ajax)

11. 如何更新组件的state数据状态，如何实现当前state中page值累加？

	this.setState({
		page:state.page++
	})

12. 当前组件引入一个子组件，如何在子组件中获取到这个data的值，并且使用es6进行改写，对象和数组合并的方法都是什么 ？分别说出两种及以上.

• 子组件用this.props.data
• 对象合并：{…obj1,…obj2}
• 数组合并：concat […arr1,…arr2]

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

用div或者<React.Fragment></React.Fragment>标签包裹

14. 在hooks中useEffect 对应是哪几个方法？

• 直接用：普通的更新钩子
• 空数组：挂载完成钩子 等价于componentDidMount
• 数组里有值：对该监听，只有该值更新的时候才会触发，第一次监听也会触发
• 返回一个函数：卸载(清除定时器等)

15. 路由中NavLink 与Link什么区别？

NavLink使用时会产生一个active的类名可以用于进行高亮或当前样式的显示