react面试题

1.什么是react?

2.react是facebook开发的前端js库，主要运用组件的思想，可让我们构想可以复用的ui组件。降低代码的耦合度。

3.react的功能是什么？

1.react和vue一样，都是采用了虚拟DOM，而不是真是的dom，虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。

2.它可以用服务器端渲染。

3.它遵循单向数据流或数据绑定。

4.列出React的一些主要优点。

React的一些主要优点是：

1. 它提高了应用的性能
2. 可以方便地在客户端和服务器端使用
3. 由于 JSX，代码的可读性很好
4. 使用React，编写UI测试用例变得非常容易

5. React有哪些限制？

React的限制如下：

1. React 只是一个库，而不是一个完整的框架
2. 它的库非常庞大，需要时间来理解
3. 新手程序员可能很难理解
4. 编码变得复杂，因为它使用内联模板和 JSX

6. 你理解“在React中，一切都是组件”这句话。

组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。

7.解释 React 中 render() 的目的。

每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、<div> 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。

8. 如何更新组件的状态？

可以用 this.setState()更新组件的状态。setState(对象,[回调函数])

state = {
  content: '大熊'
}

this.setState({
  content: '香香'
}, () => {
  // 通回调获取最新的状态
  console.log(this.state.content)
})

setState() 的第一个参数也可以是函数，这个函数接收两个参数：第一个参数为更新前的状态值，第二个参数为 props（可获取父级组件传递的数据）；当修改状态时涉及到前一个状态值时就可以使用这种形式。

this.setState((state, props) => {
  console.log(state.content, props)
  // 返回一个对象
  return {
    content: prev.

class MyComponent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'Maxx',
            id: '101'
        }
    }
    render()
        {
            setTimeout(()=>{this.setState({name:'Jaeha', id:'222'})},2000)
            return (              
				<div>
                	<h1>Hello {this.state.name}</h1>
					<h2>Your Id is {this.state.id}</h2>
                </div>
            );
        }
    }
ReactDOM.render(
    <MyComponent/>, document.getElementById('content')
);

 + '香香'
  }
})

20. React组件生命周期的阶段是什么？

React 组件的生命周期有三个不同的阶段：

1. *初始渲染阶段：*这是组件即将开始其生命之旅并进入 DOM 的阶段。
2. *更新阶段：*一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。
3. *卸载阶段：*这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。

21. 详细解释 React 组件的生命周期方法。

一些最重要的生命周期方法是：

1. componentWillMount**()** – 在渲染之前执行，在客户端和服务器端都会执行。
2. componentDidMount**()** – 仅在第一次渲染后在客户端执行。
3. componentWillReceiveProps**()** – 当从父类接收到 props 并且在调用另一个渲染器之前调用。
4. shouldComponentUpdate**()** – 根据特定条件返回 true 或 false。如果你希望更新组件，请返回true 否则返回 false。默认情况下，它返回 false。
5. componentWillUpdate**()** – 在 DOM 中进行渲染之前调用。
6. componentDidUpdate**()** – 在渲染发生后立即调用。
7. componentWillUnmount**()** – 从 DOM 卸载组件后调用。用于清理内存空间。

36. 什么是Redux？

Redux 是当今最热门的前端开发库之一。它是 JavaScript 程序的可预测状态容器，用于整个应用的状态管理。使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。

37. Redux遵循的三个原则是什么？

1. ***单一事实来源：***整个应用的状态存储在单个 store 中的对象/状态树里。单一状态树可以更容易地跟踪随时间的变化，并调试或检查应用程序。
2. ***状态是只读的：***改变状态的唯一方法是去触发一个动作。动作是描述变化的普通 JS 对象。就像 state 是数据的最小表示一样，该操作是对数据更改的最小表示。
3. ***使用纯函数进行更改：***为了指定状态树如何通过操作进行转换，你需要纯函数。纯函数是那些返回值仅取决于其参数值的函数。

39. 列出 Redux 的组件。

Redux 由以下组件组成：

1. Action – 这是一个用来描述发生了什么事情的对象。
2. Reducer – 这是一个确定状态将如何变化的地方。
3. Store – 整个程序的状态/对象树保存在Store中。
4. View – 只显示 Store 提供的数据。

41. 如何在 Redux 中定义 Action？

React 中的 Action 必须具有 type 属性，该属性指示正在执行的 ACTION 的类型。必须将它们定义为字符串常量，并且还可以向其添加更多的属性。在 Redux 中，action 被名为 Action Creators 的函数所创建。以下是 Action 和Action Creator 的示例：

function addTodo(text) {
       return {
                type: ADD_TODO,    
                 text
    }
}

解释 Reducer 的作用。

Reducers 是纯函数，它规定应用程序的状态怎样因响应 ACTION 而改变。Reducers 通过接受先前的状态和 action 来工作，然后它返回一个新的状态。它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。