React、React Native面试题

最新推荐文章于 2024-08-06 16:45:24 发布

qizhenshuai

最新推荐文章于 2024-08-06 16:45:24 发布

阅读量1.5w

点赞数 7

分类专栏： React-Native技术篇文章标签：面试题 react react-native

本文链接：https://blog.csdn.net/qizhenshuai/article/details/78202472

版权

React-Native技术篇专栏收录该内容

13 篇文章 0 订阅

订阅专栏

伴随着MVVM框架和移动端跨平台开发越来越火，作为移动端的你准备好了吗？

基础部分（答案自行百度，简答只做提示）

1.React Native相对于原生的ios和Android有哪些优势？

简答：react native一套代码可以开发出跨平台app，
减少了人力、节省了时间、避免了 iOS 与 Android 版本发布的时间差，开发新功能可以更迅速。等等

2.React Native的优点和缺点在哪里？

简答：缺点：内存、转化为原生的

3.父传子，子传父数据传递方式？

简答：props state refs 方面回答

4.如何实现底部TabBar的高度不一样呢？（类似新浪微博底部加号）

简答：主要考察flex布局绝对定位问题

5.你的项目有没有使用redux或者是mobx来管理数据呢？
6.请您简单介绍一下redux？dva? mobx？

简答：redux ==> action/reducer/store
           mobx ==>数据双向绑定

7.当你调用setState的时候，发生了什么事？

当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。
这将启动一个称为和解（reconciliation）的过程。
和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。
为此，React将构建一个新的 React 元素树（您可以将其视为 UI 的对象表示）。
一旦有了这个树，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。
通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。

React中Element 和 Component 有何区别？

简单地说，一个 React element 描述了你想在屏幕上看到什么。
换个说法就是，一个 React element 是一些 UI 的对象表示。
一个 React Component 是一个函数或一个类，
它可以接受输入并返回一个 React element 
(通常是通过 JSX ，它被转化成一个 createElement 调用）。

9.shouldComponentUpdate 应该做什么

其实这个问题也是跟reconciliation有关系。
“和解（ reconciliation ）的最终目标是以最有效的方式，根据新的状态更新用户界面”。
如果我们知道我们的用户界面（UI）的某一部分不会改变，
那么没有理由让 React 很麻烦地试图去弄清楚它是否应该渲染。
通过从 shouldComponentUpdate 返回 false，
React 将假定当前组件及其所有子组件将保持与当前组件相同

描述事件在React中的处理方式

为了解决跨浏览器兼容性问题，
您的 React 中的事件处理程序将传递 SyntheticEvent 的实例，
它是 React 的浏览器本机事件的跨浏览器包装器。

这些 SyntheticEvent 与您习惯的原生事件具有相同的接口，除了它们在所有浏览器中都兼容。
有趣的是，React 实际上并没有将事件附加到子节点本身。
React 将使用单个事件监听器监听顶层的所有事件。
这对于性能是有好处的，这也意味着在更新DOM时，React 不需要担心跟踪事件监听器

11.reactJS的props.children.map函数来遍历会收到异常提示，为什么？应该如何遍历？

this.props.children 的值有三种可能：
    1.当前组件没有子节点，它就是 undefined;
    2.有一个子节点，数据类型是 object ；
    3.有多个子节点，数据类型就是 array 。
系统提供React.Children.map()方法安全的遍历子节点对象

12.面试中的一道题:

  constructor() {
    super();
    this.state = {
      val: 0
    };
  }

  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};
问上述代码中 4 次 console.log 打印出来的 val 分别是多少？

答案：4 次 log 的值分别是：0、0、2、3。
 （如果想知道到底为什么，可以看另一篇文章，《React中this.setState到底做了什么？》）

13.XSS与CSRF介绍

XSS是一种跨站脚本攻击，是属于代码注入的一种，攻击者通过将代码注入网页中，其他用户看到会受到影响(代码内容有请求外部服务器);

CSRF是一种跨站请求伪造，冒充用户发起请求，完成一些违背用户请求的行为(删帖，改密码，发邮件，发帖等)

14.在使用redux过程中，如何防止定义的action-type的常量重复？

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。
Symbol函数前不能使用new命令，否则会报错。这是因为生成的Symbol是一个原始类型的值，不是对象
Symbol函数可以接受一个字符串作为参数，表示对Symbol实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

待续。。。