react基础面试题

1. react是单向数据流，如何实现数据双向绑定? 现有一个input 和一个span,要求使用代码实现 input 输入 span 可以直接显示，写出核心代码！
   通过onChange监听value，用this.setState改变value的值。

   this.state = { name: '' }
   
   onChange ( { target } ) {
   	const {name,value} = target;
   	this.setState({
   		[name] = value
   	})
   }
   
   <input value={name} name="name" onChange={(e)=>this.onChange(e)} type="text"/>
   

2. 一个父组件，一个子组件，如何在子组件里增加一个事件来个设置父组件的state值？
   父组件写一个改变state值的方法，把该方法传给子组件，子组件用props接收该方法，子组件里写一个方法，调用这个方法时调用父组件传过来的方法。

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

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

   1. 传递属性等，this.props.属性名
   2. this.props.children公共组件里的个别内容，闭合组件里的子内容
   3. <child left={<Left/>}/>接收一个组件
   4. 子组件通过props调用父组件的方法

   除了props可以使用context，redux，mobx

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

   • 两种：类组件（状态组件），函数组件（无状态组件，hook组件）
   • 区别：
     1. 类组件拥有react的全部特性，函数组件没有；
     2. 类组件的props通过继承，函数组件的props通过传参；
     3. 类组件的state状态只能通过setState改值；
     4. 函数组件没有生命周期，类组件有；
     5. 类组件render渲染，函数组件return渲染
   • 在hooks中的表现：const [ val , setVal ]=useState()this.setState是合并，setVal直接替换

5. React中事件this绑定的实现方法有哪些？

   1. 在constructor里this.方法=this.方法.bind(this)
   2. 在标签里绑定事件时this.方法=this.方法.bing(this)
   3. 使用箭头函数

6. react函数组件生命周期？Hook+函数组件的生命周期？

   • 类组件：
     1. 挂载阶段：constructor，render，componentDidMount
     2. 更新阶段：static getDerivedStateFromProps（对props和state进行再次修改），shouldComponentUpdate（是否要更新），render，componentDidUpdate
     3. 销毁阶段：componentWillunmount，componentDidCatch（err,info）（获取子组件错误信息）
   • 函数组件：useEffect
     • useEffect(()=>{})，什么也不传是更新阶段
     • useEffect(()=>{},[])，传个空数组是挂载阶段
     • useEffect(()=>{},[name])，传个数组里有值是监听
     • useEffect(()=>{return 函数})，返回一个函数是卸载阶段

7. 已知对象obj,ajax返回一个后如何合并原有对象，使用至少两种方法实现！
   合并对象：Object.assign(目标对象，源对象)，{…obj,…ajax}

8. 如何将两个或多个组件嵌入到一个组件中？
   在写 react 时需要包裹一个 div，一般用 <React.Fragment></React.Fragment>

9. 路由中 NavLink 与 Link 什么区别？
   NavLink 会在匹配上当前的 url 的时候给已经渲染的元素添加参数,会有一个 active 的类名

10. 手机实现上拉刷新，下拉加载，那么，下拉加载数据越来越多是通过什么方式实现的数据变多？
    通过合并新旧数据，从而使页面数据增加

11. 路由直系页面可以直接使用 history,那非直系， 隔代页面中如何使用路由相关信息？
    使用 widthRouter，用 this.props.history.push()

12. 订单页面、个人收益、个人设置等，需检测是否为登录状态，如果未登录跳到登录页面，登录成功后并返回订单页面或对应页面如何实现？
    当前的页面会进行 ajax 请求，判断是否登录，没有登陆就把当前的 url 推送到登录页面，登录成功后 push 到 url 那个页面里

13. 三列布局，左右分别为宽为 200px,中间自适应，要求使用三种以上方法实现！

    • 定位：中间 div 设置 left:100px;right:100px
    • 浮动：中间 div 设置 margin-left:100px;margin-right:100px
    • flex：左右的 div 设置 flex:0 0 100px;中间 div 设置 flex: auto;

14. 在使用 react 项目开发时，你们是如何与后端进行接口联调的？
    协商确定好了前端需要的数据接口，接口能跑通，就能一对一对接，使用代理，远程代理到本地，连接数据库里的信息

15. 在我们使用 mobx 时，我们在具体页面中如何使用 mobx 中的 state，如何操作 setState?

    //在store.js里
    //通过@action 进行数据改写
     @observable name = "小朱";
     @action
     setName = (text) => {
     	// console.log(text);
     	this.name = text;
     };
    
    //页面里
     @withRouter
     @inject("first")
     @observer
     console.log(this.props.first.name) // 使用this.props.first.定义的名称 来访问
    // 页面里使用 this.props.first.事件名称调用
    

16. 在使用 redux 如何修改 state ，通过什么方法实现？
    state 是 reducer 根据 action 计算生成的，使用 action 修改 state。
    setState === dispatch 操作了 具体 action,dispatch(actions.getData(text))来修改

17. 在 redux 中 如何实现一个 ajax 请求？
    通过 Actions.js 里写一个请求的方法，当页面调用该方法时，进行 ajax 请求

18. vue、react 打包的项目自定义路由 是否可以正常使用？如果不能,我们需要做什么？
    一级可以，二级不可以，在.env 文件里 PUBLIC_URL=路径（/,./,https）