面试题-react

对react的理解

是什么

React 是一个用于构建用户界面的 JavaScript 库。

能干什么

可以通过组件化的方式构建大型的，快速响应的大型web应用

如何做

声明式

React 使用jsx实现声明式，使创建交互式 UI 变得轻而易举。

以声明式编写 UI，可以让你的代码更加可靠，且方便调试。

（另外一种是命令式--直接操作dom）

组件化

创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。--高内聚-低耦合

组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。

一次学习，随处编写

虚拟Dom实现跨平台

无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

缺点

没有官方系统解决方案，过于灵活，需要第三方库---客户端-服务端通信，react-redux，路由，表单等

为什么react引入jsx

是什么

jsx是一个js的语法扩展，可以很好的描述UI,

是react.createElement的语法糖

jsx被@babel/preset-react插件编译为createElement()方法

createElement() -> react元素(普通的js对象)

为什么

为了实现声明式，代码结构更加简洁，可读性强

不许引入新的语法和概念，用js写

比如：angular就使用了基于HTML的模板

对虚拟DOM的理解

react.createElement函数返回的就是一个虚拟DOM

虚拟DOM就是一个描述真实DOM的纯js对象

过程：

每当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。

然后计算之前 DOM 表示与新表示的之间的差异。

完成计算后，将只用实际更改的内容更新 real DOM。

React与Angular有何不同？

	React	Angular
	只有 MVC 中的 View	完整的 MVC
	可以在服务器端渲染	客户端渲染
	使用 virtual DOM	使用 real DOM
	单向数据绑定	双向数据绑定
	编译时调试	运行时调试
	Facebook	Google

React中的合成事件是什么？

合成事件是围绕浏览器原生事件充当跨浏览器包装器的对象。它们将不同浏览器的行为合并为一个 API。这样做是为了确保事件在不同浏览器中显示一致的属性。

箭头函数

类组件中 this

事件中的this是undefined   render()中的this指向实例-就可以用了

解决

+ 箭头函数：自身不绑定this，指向外部环境 <button onClick={() => this.add()}> + </button>

+ Function.prototype.bind() 将事件中的this与组件实例绑定 构造函数(Constructor)中的this指向调用该构造函数所创建的实例对象(instance)。

+ 事件改为用箭头函数实现

组件通讯

- 父 => 子 属性传递

- 子 => 父 回调函数

- 兄弟 => 兄弟 由公共父组件管理状态

- 跨组件传递数据 Context

 

组件生命周期 类组件才有

创建时

- constructor() 初始化state

- render() 每次组件渲染都会触发（不能用setState）

- componentDidMount() DOM渲染完成后 1发送网络请求 2DOM操作

更新时

- this.setState()

- this.forceUpdate()

- 组件接收的props发生变化

- 以上都会触发render()更新

componentDidUpdate() render()后 1发送网络请求 2DOM操作

卸载时

- componentWillUNmount() 执行清理 如定时器

React 中 key 的重要性是什么？

key 用于识别唯一的 Virtual DOM 元素及其驱动 UI 的相应数据。它们通过回收 DOM 中当前所有的元素来帮助 React 优化渲染。

这些 key 必须是唯一的数字或字符串，React 只是重新排序元素而不是重新渲染它们。这可以提高应用程序的性能。

React hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook 是什么？ Hook 是一个特殊的函数，它可以让你“钩入” React 的特性。

什么时候我会用 Hook？ 如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用 Hook。

 

在函数组件中，我们没有 this，所以我们不能分配或读取 this.state。我们直接在组件中调用 useState Hook

 

 

useState 是允许你在 React 函数组件中添加 state 的 Hook。

Effect Hook 可以让你在函数组件中执行副作用操作数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。

 

useEffect 做了什么？ 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。

React 会保存你传递的函数（我们将它称之为 “effect”），并且在执行 DOM 更新之后调用它。