中建西部建设北方有限公司网站,网站建设和制作,国外免费空间申请,网络公司是干什么工作的面试题 1. 简述什么是React #xff08; 概念 #xff09;#xff1f;
参考回答#xff1a;
1、React是Facebook开发的一款JS库。
2、React一般被用来作为MVC中的V层#xff0c;它不依赖其他任何的库#xff0c;因此开发中#xff0c;可以与任何其他的库集成使用…面试题 1. 简述什么是React 概念
参考回答
1、React是Facebook开发的一款JS库。
2、React一般被用来作为MVC中的V层它不依赖其他任何的库因此开发中可以与任何其他的库集成使用包括Jquery、Backbone等。
3、它可以在浏览器端运行也可以通过nodejs在服务端渲染。
4、React的思想非常独特性能出众可以写出重复代码少逻辑清晰的前端代码。
5、React的语法是jsx通过使用这种语法可以在react代码中直接混合使用js和html来编写代码这样代码的逻辑就非常清晰当然也意味着需要将jsx代码编译成普通的javascript代码才能在浏览器中运行这个过程根据实际项目情况可以选择多种不同的思路或者在服务器端通过webpack进行编译面试题 2. 简述React有什么特点
参考回答
1.声明式设计React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图当数据变动时 React能高效更新并渲染合适的组件。
2.组件化: 构建管理自身状态的封装组件然后对其组合以构成复杂的 UI。
3.高效React通过对DOM的模拟最大限度地减少与DOM的交互。
4.灵活无论你现在使用什么技术栈在无需重写现有代码的前提下通过引入React来开发新功能。React 是一个声明式高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面这些代码片段被称作“组件”。
由于React的设计思想极其独特属于革命性创新性能出众代码逻辑却非常简单。所以越来越多的人开始关注和使用认为它可能是将来Web开发的主流工具。
这个项目本身也越滚越大从最早的UI引擎变成了一整套前后端通吃的Web App解决方案。衍生的React Native 项目目标更是宏伟希望用写Web App的方式去写Native App。如果能够实现整个互联网行业都会被颠覆因为同一组人只需要写一次UI 就能同时运行在服务器、浏览器和手机。面试题 3. 请说明什么是JSX
参考回答
JSX是一种JavaScript的语法扩展运用于React架构中其格式比较像是模版语言但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位JSX就是用来声明React当中的元素React使用JSX来描述用户界面。
可以通过以下三个方面了解JSX
1JSX 是一种 JS 扩展的表达式
2JSX 是带有逻辑的标记语法有别于 HTML 模版
3并且支持样式、逻辑表达式和事件面试题 4. 简述虚拟DOM的概念和机制
参考回答
传统的 DOM 操作是直接在 DOM 上操作的当需要修改一系列元素中的值时就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较DIFF从而只选择需要修改的部分。也因此对于不需要大量修改 DOM 的应用来说采用 Virtual DOM 并不会有优势。开发者就可以创建出可交互的 UI。在React中render执行的结果得到的并不是真正的DOM节点结果仅仅是轻量级的JavaScript对象我们称之为virtual DOM。虚拟DOM是React的一大亮点具有batching(批处理)和高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。在实际开发中基本无需关心虚拟DOM是如何运作的但是理解其运行机制不仅有助于更好的理解React组件的生命周期而且对于进一步优化 React程序也会有很大帮助。虚拟的DOM的核心思想是对复杂的文档DOM结构提供一种方便的工具进行最小化地DOM操作。这句话也许过于抽象却基本概况了虚拟DOM的设计思想面试题 5. 简述React有什么优缺点
参考回答
React优点
1、React速度快、性能好
它并不直接对DOM进行操作引入了一个叫做虚拟DOM的概念安插在javascript逻辑和实际的DOM之间性能好
2、跨浏览器兼容
虚拟DOM的原因帮助我们解决了跨浏览器问题它为我们提供了标准化的API
3、单向数据流
Flux随着React视图库的开发而被Facebook概念化是一个用于在JavaScript应用中创建单向数据层的架构
4、React兼容性好
使用RequireJS来加载和打包而Browserify和Webpack适用于构建大型应用。React缺点
1.React并不是一个单独完整的框架React是目标是UI组件通常可以和其它框架组合使用目前并不适合单独做一个完整的框架面试题 6. React 类组件和函数组件之间的区别是什么
参考回答
主要要以下几个区别1语法不同、设计思想不同
2生命周期、状态变量
3复用性
4优缺点一、语法不同、设计思想不同
函数式组件是函数式编程思想而类组件是面向对象编程思想。面向对象编程将属性和方法封装起来屏蔽很多细节不利于测试。二、生命周期、状态变量
类式组件使用state对象定义状态变量有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数
函数式组件没有this,使用一系列的内置hooks实现对应的功能比如使用useState创建状态变量使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。三、复用性
类式组件使用hoc高阶组件、render propss实现组件的逻辑复用、拓展组件的功能。
函数式组件使用自定义hooks实现组件的逻辑复用。四、优缺点
# 函数式组件
优点
相对于类式组件一般情况而言代码量更少代码更简洁可读性更强
更易于拆分组件和测试
缺点
在业务逻辑巨复杂状态依赖关系错乱的情况下使用useEffect、useMemo等hooks对其依赖项数组的思考为开发者带来了更大的心智负担
不具备处理错误边界等业务情况的hooks# 类式组件
优点
功能完备具有componentDidsCatch、getDerivedStateFromError等钩子函数处理边界错误
缺点在复用性上hoc组件等会出现诸如嵌套地狱、重名props被覆盖、难以拆分和测试等问题五、总结
类式组件和函数式组件各有其优点关键是看自己的需求是什么如果你开发的业务逻辑和状态并不复杂那么类式组件可能会更合适
但是如果你要处理错误边界或者是业务逻辑巨复杂的情况那么类式组件更合适
其实无论是什么技术开发衡量代码是否优雅的标准无非是开发效率复用性、易用性、代码性能、是否易于测试和维护当然三者常常不可兼得关键看自己需求是什么面试题 7. 简述React 中 refs 的作用
参考回答
React Refs 提供了一种访问在render方法中创建的 DOM 节点或者 React 元素的方法。在典型的数据流中props 是父子组件交互的唯一方式想要修改子组件需要使用新的pros重新渲染它。凡事有例外某些情况下咱们需要在典型数据流外强制修改子代这个时候可以使用 Refs。
咱们可以在组件添加一个 ref 属性来使用该属性的值是一个回调函数接收作为其第一个参数的底层 DOM 元素或组件的挂载实例。class UnControlledForm extends Component {
handleSubmit () {
console.log(Input Value: , this.input.value);
};
render() {
return (form onSubmit{this.handleSubmit}input typetext ref{(input) (this.input input)} /button typesubmitSubmit/button/form);
}
}请注意input 元素有一个ref属性它的值是一个函数。该函数接收输入的实际 DOM 元素然后将其放在实例上这样就可以在 handleSubmit 函数内部访问它。
经常被误解的只有在类组件中才能使用 refs但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。function CustomForm({ handleSubmit }) {
let inputElement;
return (form onSubmit{() handleSubmit(inputElement.value)}input typetext ref{(input) (inputElement input)} /button typesubmitSubmit/button/form);
}面试题 8. 简述React store的概念
参考回答
React Store 就是把它们联系到一起的对象。Store 有以下职责
const store createStore(reducer)
1:维持应用的 state
2:提供 getState() 方法获取 state
3:提供 dispatch(action) 方法更新 state
4:通过 subscribe(listener)注册监听器;
5:通过 subscribe(listener)返回的函数注销监听器面试题 9. 解释为什么浏览器不能读取 JSX
参考回答
浏览器只能读取 JavaScript 对象但不能读取常规 JavaScript 对象中的 JSX。因此为了让浏览器能够读取 JSX首先我们需要使用 Babel 等 JSX 转换器将 JSX 文件转换为 JavaScript 对象然后将其传递给浏览器面试题 10. 请列举ES5 相比React 的 ES6 语法有何不同
参考回答
从 ES5 到 ES6 的语法有以下几个方面的变化
1require vs import// ES5
var React require(react);
// ES6
import React from react;
2export vs exports
// ES5
module.exports Component;
// ES6
export default Component;
3component and function
// ES5
var MyComponent React.createClass({
render: function() {
return
Hello Edureka!;
}
});
// ES6
class MyComponent extends React.Component {
render() {
return
Hello Edureka!;
}
}4props
// ES5
var App React.createClass({
propTypes: { name: React.PropTypes.string },
render: function() {
return
Hello, {this.props.name}!;
}
});
// ES6
class App extends React.Component {
render() {
return
Hello, {this.props.name}!;
}
}
5state
// ES5
var App React.createClass({
getInitialState: function() {
return { name: world };
},
render: function() {
return
Hello, {this.state.name}!;
}
});
// ES6
class App extends React.Component {
constructor() {
super();
this.state { name: world };
}
render() {
return
Hello, {this.state.name}!;
}
}面试题 11. 简述React中引入css的方式
参考回答
组件中引入 .module.css 文件
使用.module.css文件来为组件引入样式这种方式也被称为CSS模块化。
在.module.css文件中定义的样式只能作用于当前组件内部不会影响到其他组件或全局样式这样可以避免样式冲突的问题。
CSS in JS
CSS in JS 是一种前端开发技术它将 CSS 样式表的定义和 JS 代码紧密结合在一起以实现更高效、更灵活的样式控制。在 CSS in JS 中开发者可以使用 JS 来编写 CSS 样式可以在代码中通过变量或函数等方式来动态生成样式。这种方式可以避免传统 CSS 中的一些问题如全局作用域、选择器嵌套、命名冲突等同时也提供了更高的可重用性和可维护性。在 React 中有多种支持 CSS in JS 的第三方库比较常用的有 styled-components、Emotion、JSS 等。这些库都提供了方便的 API 来定义和应用样式并且可以自动管理 CSS 的引入和组件的封装。使用 CSS in JS 可以更好地与组件化开发思想结合提高代码的可复用性和可维护性面试题 12. 请介绍React中的key有什么作用
参考回答
在 React 中key 是用来给每个组件的元素Element做一个唯一的标识。当 React 更新组件的时候它会对比新旧两个组件的 key 是否一致如果一致则说明是同一个组件直接更新它的内容即可。如果不一致则说明是不同的组件需要先删除旧组件再新建一个新的组件并插入到 DOM 树中。因此key 的作用是帮助 React 快速判断出哪些元素发生了变化从而提高性能避免不必要的 DOM 操作。同时key 也可以用来保证数组渲染时每个元素的稳定性避免出现类似于数组元素位置发生变化但是内容没变的情况面试题 13. 简述类组件和函数式组件的区别
参考回答
1 语法类组件使用ES6的class语法创建组件而函数式组件使用函数声明来创建组件。2 状态管理类组件可以使用state来管理组件的内部状态而函数式组件则通常使用userState Hook来管理状态。3 生命周期类组件可以使用生命周期方法如componentDidMount、componentDidUpdate等来管理组件的生命周期而函数式组件则使用useEffect Hook来管理。4 调用方式如果是一个函数组件调用则是执行函数即可如果是一个类组件则需要将组件进行实例化然后调用实例对象的render方法5 性能函数式组件通常比类组件更轻量级因为类组件需要实例化而函数式组件只是普通函数调用面试题 14. 请列举常用的React Hooks
参考回答
useState(): 允许在函数组件中使用状态。使用useState() 声明一个状态变量并使用它来存储组件的状态。每次更改状态时组件将重新渲染。useEffect():用于处理副作用。副作用指在React组件之外进行的操作例如从服务器获取数据处理DOM元素等。使用useEffect() hook您可以执行此类操作而无需在类组件中编写生命周期方法。点击去学习useContext(): 允许您在React中使用上下文。上下文是一种在组件树中传递数据的方法可以避免通过Props一层层传递数据。使用useContext() hook您可以访问整个应用程序中定义的上下文对象。点击去学习useReducer(): 是useState() hook的替代品用于管理更复杂的状态。它使用Reducer函数来管理组件状态Reducer函数接收当前状态和要进行的操作然后返回新状态。详细使用方式见此文章。点击去学习useCallback(): 用于避免在每次渲染时重新创建回调函数。当您需要将回调函数传递给子组件时这非常有用因为它可以避免子组件不必要地重新渲染。点击去学习useMemo(): 用于缓存计算结果以避免在每次渲染时重新计算。这非常有用特别是当计算成本很高时。点击去学习useRef(): 用于创建对DOM元素的引用。它还可以用于存储组件之间共享的变量这些变量不会在组件重新渲染时发生更改面试题 15. 请列举React和vue.js的相似性和差异性
参考回答
相似性如下。
1都是用于创建UI的 JavaScript库。
2都是快速和轻量级的代码库这里指 React核心库。
3都有基于组件的架构。
4都使用虚拟DOM。
5都可以放在单独的HTML文件中或者放在 Webpack设置的一个更复杂的模块中。
6都有独立但常用的路由器和状态管理库。它们最大的区别在于 Vue. js通常使用HTML模板文件而 React完全使用 JavaScript创建虚拟DOM。 Vue. js还具有对于“可变状态”的“ reactivity”的重新渲染的自动化检测系统面试题 16. React中什么是受控组件和非控组件
参考回答
1受控组件 在使用表单来收集用户输入时例如inputselecttextearea等元素都要绑定一个change事件当表单的状态发生变化就会触发onChange事件更新组件的state。这种组件在React中被称为受控组件在受控组件中组件渲染出的状态与它的value或checked属性相对应react通过这种方式消除了组件的局部状态使整个状态可控。react官方推荐使用受控表单组件。
受控组件更新state的流程可以通过初始state中设置表单的默认值
每当表单的值发生变化时调用onChange事件处理器
事件处理器通过事件对象e拿到改变后的状态并更新组件的state
一旦通过setState方法更新state就会触发视图的重新渲染完成表单组件的更新
受控组件缺陷 表单元素的值都是由React组件进行管理当有多个输入框或者多个这种组件时如果想同时获取到全部的值就必须每个都要编写事件处理函数这会让代码看着很臃肿所以为了解决这种情况出现了非受控组件。2非受控组件 如果一个表单组件没有value props单选和复选按钮对应的是checked props时就可以称为非受控组件。在非受控组件中可以使用一个ref来从DOM获得表单值。而不是为每个状态更新编写一个事件处理程序class NameForm extends React.Component {constructor(props) {super(props);this.handleSubmit this.handleSubmit.bind(this);}handleSubmit(event) {alert(A name was submitted: this.input.value);event.preventDefault();}render() {return (form onSubmit{this.handleSubmit}labelName: input typetext ref{(input) this.input input} / /labelinput typesubmit valueSubmit //form);}
}面试题 17. 请简述React中props.children和React.Children的区别
参考回答
在React中当涉及组件嵌套在父组件中使用props.children把所有子组件显示出来。如下function ParentComponent(props){
return ({props.children})
}如果想把父组件中的属性传给所有的子组件需要使用React.Children方法。比如把几个Radio组合起来合成一个RadioGroup这就要求所有的Radio具有同样的name属性值。可以这样把Radio看做子组件RadioGroup看做父组件name的属性值在RadioGroup这个父组件中设置。首先是子组件//子组件
function RadioOption(props) {
return (input typeradio value{props.value} name{props.name} /{props.label}
)
}然后是父组件不仅需要把它所有的子组件显示出来还需要为每个子组件赋上name属性和值//父组件用,props是指父组件的props
function renderChildren(props) {//遍历所有子组件
return React.Children.map(props.children, child {
if (child.type RadioOption)
return React.cloneElement(child, {
//把父组件的props.name赋值给每个子组件
name: props.name
})
else
return child
})
}
//父组件
function RadioGroup(props) {
return ({renderChildren(props)})
}
function App() {
return (RadioGroup namehelloRadioOption label选项一 value1 /RadioOptionRadioOption label选项二 value2 /RadioOptionRadioOption label选项三 value3 /RadioOption/RadioGroup)
}
export default App;面试题 18. Redux 中间件是怎么拿到store 和 action? 然后怎么处理?
参考回答
redux中间件本质就是一个函数柯里化。redux applyMiddleware Api 源码中每个middleware 接受2个参数 Store 的getState 函数和dispatch 函数分别获得store和action最终返回一个函数。该函数会被传入 next 的下一个 middleware 的 dispatch 方法并返回一个接收 action 的新函数这个函数可以直接调用 nextaction或者在其他需要的时刻调用甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store的 dispatch 方法作为 next 参数并借此结束调用链。所以middleware 的函数签名是{ getStatedispatch }) next action面试题 19. React Hook 的使用限制有哪些
参考回答
React Hooks 的限制主要有两条不要在循环、条件或嵌套函数中调用 Hook
在 React 的函数组件中调用 Hook。
那为什么会有这样的限制呢Hooks 的设计初衷是为了改进 React 组件的开发模式。在旧有的开发模式下遇到了三个问题。组件之间难以复用状态逻辑。过去常见的解决方案是高阶组件、render props 及状态管理框架。
复杂的组件变得难以理解。生命周期函数与业务逻辑耦合太深导致关联部分难以拆分。
人和机器都很容易混淆类。常见的有 this 的问题但在 React 团队中还有类难以优化的问题希望在编译优化层面做出一些改进。
这三个问题在一定程度上阻碍了 React 的后续发展所以为了解决这三个问题Hooks 基于函数组件开始设计。然而第三个问题决定了 Hooks 只支持函数组件。那为什么不要在循环、条件或嵌套函数中调用 Hook 呢因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中如果使用循环、条件或嵌套函数很有可能导致数组取值错位执行错误的 Hook。当然实质上 React 的源码里不是数组是链表。这些限制会在编码上造成一定程度的心智负担新手可能会写错为了避免这样的情况可以引入 ESLint 的 Hooks 检查插件进行预防面试题 20. 使用 React Router时如何获取当前页面的路由或浏览器中地址栏中的地址
参考回答
在当前组件的 props中包含 location属性对象包含当前页面路由地址信息在 match中存储当前路由的参数等数据信息。可以直接通过 this .props使用它们面试题 21. React Hooks在平时开发中需要注意的问题和原因
参考回答 1不要在循环条件或嵌套函数中调用Hook必须始终在 React函数的顶层使用Hook
这是因为React需要利用调用顺序来正确更新相应的状态以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook就容易导致调用顺序的不一致性从而产生难以预料到的后果。2使用useState时候使用pushpopsplice等直接更改数组对象的坑
使用push直接更改数组无法获取到新值应该采用析构方式但是在class里面不会有这个问题。代码示例function Indicatorfilter() {let [num,setNums] useState([0,1,2,3])const test () {// 这里坑是直接采用push去更新num// setNums(num)是无法更新num的// 必须使用num [...num ,1]num.push(1)// num [...num ,1]setNums(num)}
return (div classNamefilterdiv onClick{test}测试/divdiv{num.map((item,index) (
div key{index}{item}/div))} /div/div)
}class Indicatorfilter extends React.Componentany,any{constructor(props:any){super(props)this.state {nums:[1,2,3]}this.test this.test.bind(this)}test(){// class采用同样的方式是没有问题的this.state.nums.push(1)this.setState({nums: this.state.nums})}render(){let {nums} this.statereturn(divdiv onClick{this.test}测试/divdiv{nums.map((item:any,index:number) (div key{index}{item}/div))}/div/div)}
}3useState设置状态的时候只有第一次生效后期需要更新状态必须通过useEffectTableDeail是一个公共组件在调用它的父组件里面我们通过set改变columns的值以为传递给TableDeail 的 columns是最新的值所以tabColumn每次也是最新的值但是实际tabColumn是最开始的值不会随着columns的更新而更新const TableDeail ({ columns,}:TableData) {const [tabColumn, setTabColumn] useState(columns)
}// 正确的做法是通过useEffect改变这个值
const TableDeail ({ columns,}:TableData) {const [tabColumn, setTabColumn] useState(columns) useEffect(() {setTabColumn(columns)},[columns])
}4善用useCallback
父组件传递给子组件事件句柄时如果我们没有任何参数变动可能会选用useMemo。但是每一次父组件渲染子组件即使没变化也会跟着渲染一次。5不要滥用useContext
可以使用基于 useContext 封装的状态管理工具。面试题 22. 请简述Redux中的connect 作用
参考回答
connect负责连接React和Redux1获取state
connect 通过 context获取 Provider 中的 store通过 store.getState() 获取整个store tree 上所有state2包装原组件
将state和action通过props的方式传入到原组件内部 wrapWithConnect 返回—个 ReactComponent 对 象 ConnectConnect 重 新 render 外部传入的原组件 WrappedComponent 并把 connect 中传入的 mapStateToPropsmapDispatchToProps与组件上原有的 props合并后通过属性的方式传给WrappedComponent3监听store tree变化
connect缓存了store tree中state的状态通过当前state状态 和变更前 state 状态进行比较从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染面试题 23. React的严格模式如何使用有什么用处
参考回答
StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。
可以为应用程序的任何部分启用严格模式。例如import React from react;
function ExampleApplication() {
return (divHeader /HeaderReact.StrictMode divComponentOne /ComponentOneComponentTwo /ComponentTwo/div/React.StrictMode Footer /Footer/div);
}在上述的示例中不会对 Header 和 Footer 组件运行严格模式检查。但是ComponentOne 和 ComponentTwo 以及它们的所有后代元素都将进行检查。StrictMode 目前有助于识别不安全的生命周期
关于使用过时字符串 ref API 的警告
关于使用废弃的 findDOMNode 方法的警告
检测意外的副作用
检测过时的 context API面试题 24. ReactNative中如何解决8081端口号被占用而提示无法访问的问题
参考回答
运行 react-native start时添加参数port 8082在 package.json中修改“scripts”中的参数添加端口号修改项目下的 node_modules \react-native\local- cli\server\server.js文件配置中的 default端口面试题 25. State 是怎么注入到组件的从 reducer 到组件经历了什么样的过程
参考回答
通过connect和mapStateToProps将state注入到组件中import { connect } from react-redux
import { setVisibilityFilter } from /reducers/Todo/actions
import Link from /containers/Todo/components/Linkconst mapStateToProps (state, ownProps) ({
active: ownProps.filter state.visibilityFilter
})const mapDispatchToProps (dispatch, ownProps) ({
setFilter: () {
dispatch(setVisibilityFilter(ownProps.filter))
}
})export default connect(
mapStateToProps,
mapDispatchToProps
)(Link)
上面代码中active就是注入到Link组件中的状态。 mapStateToPropsstateownProps中带有两个参数含义是∶state-store管理的全局状态对象所有都组件状态数据都存储在该对象中。
ownProps 组件通过props传入的参数。
reducer 到组件经历的过程reducer对action对象处理更新组件状态并将新的状态值返回store。
通过connectmapStateToPropsmapDispatchToPropsComponent对组件 Component进行升级此时将状态值从store取出并作为props参数传递到组件。面试题 26. React中如何处理事件
参考回答
为了解决跨浏览器的兼容性问题SyntheticEvent 实例将被传递给你的事件处理函数SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器它还拥有和浏览器原生事件相同的接口包括 stopPropagation() 和 preventDefault()。比较有趣的是React 实际上并不将事件附加到子节点本身。React 使用单个事件侦听器侦听顶层的所有事件。这对性能有好处也意味着 React 在更新 DOM 时不需要跟踪事件监听器面试题 27. React state和props区别是什么 ?
参考回答
1props
props是⼀个从外部传进组件的参数主要作为就是从⽗组件向⼦组件传递数据它具有可读性和不变性只能通过外部组件主动传⼊新的props来重新渲染⼦组件否则⼦组件的props以及展现形式不会改变。
2state
state的主要作⽤是⽤于组件保存、控制以及修改⾃⼰的状态它只能在constructor中初始化它算是组件的私有属性不可通过外部访问和修改只能通过组件内部的this.setState来修改修改state属性会导致组件的重新渲染。
3区别
props 是传递给组件的类似于函数的形参⽽state 是在组件内被组件⾃⼰管理的类似于在⼀个函数内声明的变量。
props 是不可修改的所有 React 组件都必须像纯函数⼀样保护它们的 props 不被更改。state 是在组件中创建的⼀般在 constructor中初始化 state。state 是多变的、可以修改每次setState都异步更新的面试题 28. 简述什么是React 高阶组件
参考回答
一、定义
高阶组件HOC是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分它是一种基于 React 的组合特性而形成的设计模式。具体而言高阶组件是参数为组件返回值为新组件的函数如const NewComponent higherOrderComponent(OldComponent);
二、例子
高阶组件是一个函数而不是组件它接受一个组件作为参数返回一个新的组件。这个新的组件会使用你传给它的组件作为子组件我们可以看个例子来进一步理解一下。假设在src/wrapWithLoadData.js 文件中写一个HOC要求NewComponent 会根据第二个参数 name 在挂载阶段从 localStorage 加载数据并且 setState 到自己的 state.data 中而渲染的时候将 state.data 通过 props.data 传给 WrappedComponent如下
import React, { Component } from react;
export default (WrappedComponent, name) {
class NewComponent extends Component {
constructor () {
super()
this.state { data: null }
}componentWillMount () {
let data localStorage.getItem(name)
this.setState({ data })
}render () {
return
}
}
return NewComponent;
}
假如有一个组件的需求是挂载的时候从 localStorage 里面加载 username 字段作为input /
的 value 值现在有了 wrapWithLoadData我们可以很容易地做到这件事情。只需要定义一个非常简单的 InputWithUserName它会把 props.data 作为
input /
的 value 值。然把这个组件和 username 传给 wrapWithLoadDatawrapWithLoadData 会返回一个新的组件我们用这个新的组件覆盖原来的 InputWithUserName然后再导出去模块我们可以在src/inputWithUserName.js 文件中这样写
import wrapWithLoadData from ./wrapWithLoadData;class InputWithUserName extends Component {
render () {
return
{this.props.data}}
}InputWithUserName wrapWithLoadData(InputWithUserName, username);
export default InputWithUserName;
这个新的组件挂载的时候会先去 localStorage 加载数据渲染的时候再通过 props.data 传给真正的 InputWithUserName别人用这个组件的时候实际是用了被加工过的组件
import InputWithUserName from ./InputWithUserName;class Index extends Component {
render () {
return (用户名)
}
}
如果现在我们需要另外一个文本输入框组件它也需要 localStorage 加载 content 字段的数据。我们只需要定义一个新的 TextareaWithContent
import wrapWithLoadData from ./wrapWithLoadData;
class TextareaWithContent extends Component {
render () {
return }
}
TextareaWithContent wrapWithLoadData(TextareaWithContent, content);
export default TextareaWithContent;
这样我们根本不需要重复写从 localStorage 加载数据字段的逻辑直接用 wrapWithLoadData 包装一下就可以了。对于 InputWithUserName 和 TextareaWithContent 这两个组件来说它们的需求有着一个相同的逻辑“挂载阶段从 localStorage 中加载特定字段数据”。如果按照之前的做法我们需要给它们两个都加上 componentWillMount 生命周期然后在里面调用 localStorage。要是有第三个组件也有这样的加载逻辑又得写一遍这样的逻辑。但有了 wrapWithLoadData 高阶组件我们把这样的逻辑用一个组件包裹了起来并且通过给高阶组件传入 name 来达到不同字段的数据加载。充分复用了逻辑代码。到这里高阶组件的作用其实不言而喻其实就是为了组件之间的代码复用。组件可能有着某些相同的逻辑把这些逻辑抽离出来放到高阶组件中进行复用。高阶组件内部的包装组件和被包装组件之间通过 props 传递数据。面试题 29. 简述对 Redux 的理解主要解决什么问题
参考回答
React是视图层框架。Redux是⼀个⽤来管理数据状态和UI状态的JavaScript应⽤⼯具。随着JavaScript单⻚应⽤SPA开发⽇趋复杂 JavaScript需要管理⽐任何时候都要多的state状态 Redux就是降低管理难度的。Redux⽀持React、Angular、jQuery甚⾄纯JavaScript在 React 中UI 以组件的形式来搭建组件之间可以嵌套组合。但 React 中组件间通信的数据流是单向的顶层组件可以通过 props 属性向下层组件传递数据⽽下层组件不能向上层组件传递数据兄弟组件之间同样不能。这样简单的单向数据流⽀撑起了 React 中的数据可控性。
当项⽬越来越⼤的时候管理数据的事件或回调函数将越来越多也将越来越不好管理。管理不断变化的state ⾮常困难。如果⼀个 model 的变化会引起另⼀个 model 变化那么当 view 变化时就可能引起对应 model 以及另⼀个 model 的变化依次地可能会引起另⼀个 view 的变化。直⾄你搞不清楚到底发⽣了什么。state 在什么时候由于什么原因如何变化已然不受控制。 当系统变得错综复杂的时候想重现问题或者添加新功能就会变得举步维艰。如果这还不够糟糕考虑⼀些来⾃前端开发领域的新需求如更新调优、服务端渲染、路由跳转前请求数据等。state 的管理在⼤项⽬中相当复杂。
Redux 提供了⼀个叫 store 的统⼀仓储库组件通过 dispatch 将 state 直接传⼊store不⽤通过其他的组件。并且组件通过 subscribe 从 store获取到 state 的改变。使⽤了 Redux所有的组件都可以从 store 中获取到所需的 state他们也能从store 获取到 state 的改变。这⽐组
件之间互相传递数据清晰明朗的多。
主要解决的问题 单纯的Redux只是⼀个状态机是没有UI呈现的react- redux作⽤是将Redux的状态机和React的UI呈现绑定在⼀起当你dispatch action改变state的时候会⾃动更新⻚⾯。面试题 30. 简述Redux的应用优点
参考回答
在应用中使用Redux有如下好处
1 预测始终有一个准确的数据源就是store, 对于如何将actions以及应用的其他部分和当前的状态同步可以做到绝不混乱。
2 维护具备可预测结果的性质和严格的组织结构让代码更容易维护。
组织对代码应该如何组织更加严苛这使代码更加一致对团队协作更加容易。
3 测试编写可测试代码的首要准则就是编写可以仅做一件事并且独立的小函数。Redux的代码几乎全部都是这样的函数短小、纯粹、分离。
4 服务端渲染可以带来更好的用户体验并且有助于搜索引擎优化尤其是对于首次渲染。仅仅是把服务端创建的store传递给客户端就可以。
5 开发者工具开发者可以实时跟踪在应用中正在发生的一切从actions到状态的改变。
6 社区与生态圈存在很多支持Redux的社区使它能够吸引更多的人来使用。面试题 31. React 中为什么要使用 Hook
参考回答
这里我们简要的提炼下1 在组件之间复用状态逻辑很难在类组件中可能需要 render props 和 高阶组件等方式但会形成“嵌套地域”而使用 Hook则可以从组件中提取状态逻辑是的这些逻辑可以单独测试并复用2 复杂组件变得难以理解在类组件中每个生命周期常常包含一些不相关的逻辑。如不同的执行逻辑都要放在componentDidMount中执行和获取数据而之后需在 componentWillUnmount 中清除但在函数组件中不同的逻辑可以放在不同的 Hook 中执行互不干扰3 难以理解的 class类组件中充斥着各种对 this 的使用如 this.onClick.bind(this)this.statethis.setState() 等同时class 不能很好的压缩并且会使热重载出现不稳定的情况Hook 使你在非 class 的情况下可以使用更多的 React 特性面试题 32. 请简述useCallback 和 useMemo 的使用场景
参考回答
useCallback 和 useMemo 可以用来缓存函数和变量提高性能减少资源浪费。但并不是所有的函数和变量都需要用这两者来实现他也有对应的使用场景。我们知道 useCallback 可以缓存函数体在依赖项没有变化时前后两次渲染时使用的函数体是一样的。它的使用场景是函数作为其他 hook 的依赖项时如在 useEffect()中
函数作为 React.memo()或 shouldComponentUpdate 中的组件的 props
主要是为了避免重新生成的函数会导致其他 hook 或组件的不必要刷新。useMemo 用来缓存函数执行的结果。如每次渲染时都要执行一段很复杂的运算或者一个变量需要依赖另一个变量的运算结果就都可以使用 useMemo()。
