React、React Native面试题

伴随着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 的占用空间。

1. React中Element 和 Component 有何区别？

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

9.shouldComponentUpdate 应该做什么

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

1. 描述事件在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实例的描述，主要是为了在控制台显示，或者转为字符串时，比较容易区分。

待续。。。