React

一、组件基础

1. React 事件机制

<div
	onClick={this.handleClick.bind(this)}
>
	点我
</div>

react并不是将click事件绑定到div真实的dom上，而是在document处监听了所有的事件。当事件发生并且冒泡在document处时，react将事件内容封装并交给真正的处理函数处理，这样的方式不仅仅减少了内存的消耗，还能在挂件在销毁时统一订阅和移除事件。
除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件。因此不想事件冒泡，应该调用event.preventDefault()方法，而不是调用event.stopPropagation()方法。
So,

4. React 高阶组件、Render props、hooks 有什么区别，为什么要不断迭代

function withSubscription(WrappedComponent, selectData){
	return class extend React.Component {
		constructor(props){
			super(props);
			this.state = {
				data: selectData(DataSource, props)
			};
		}
		render(){
			return <WrappedComponent data={this.state.data} {...this.props}/>;
		}
	}
}
const BlogPostWithSubscription = withSubscription(BlogPost, (DataSOurce, props) => DataSource.getBLogPost(props.id));



5. 对React-Fiber的理解，它解决了什么问题？



9. React 高阶组件是什么，和普通组件有什么区别，适用什么场景



function hoc(wrappedComponent, optionalData){
	return class extends React.Component {
		constructor(props){
			super(props);
			this.state = {
				data: optionalData(DataSource, props)
			}
		}
	}

	render(){
		return <WrappedComponent data={this.state.data} {...this.props}/>;
	}
}

const BlogPostWithSubscription = hoc(BlogPost, (DataSource, props)=>DataSource.getBlogPost(props.id));

//普通组件
import React, {Component} from "react";

class MyCompoent extends Component{
	render(){
		return <div>...</div>
	}

}

function MyCompoent(props) {
	return <div>...</div>

}


11. 哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？



14. 对有状态组件和无状态组件的理解及使用场景


无状态一般是纯展示性的组件，简单UI。

有状态适用于复杂UI和处理用户交互的组件。


23. React中什么是受控组件和非控组件？



28. 类组件与函数组件有什么异同？



23


数据管理


1. React setState 调用的原理



ReactComponent.prototype.setState = function(partialState, callback){
	this.updater.enqueueSetState(this, partialState);
	if (callback) {
		this.updater.enqueueCallback(this, callback, "setState");
	}
}



enqueueSetState: function(publicInstance, partialState){
	var internalInstance = getInternalInstanceReadyForUpdate(publicInstance, "setState");
	var queue = internalInstance._pendingStateQueue||(internalInstance._pendingStateQueue = []);
	queue.push(partialState);
	enqueueUpdate(internalInstance);
}



function enqueueUpdate(component){
	ensureInjected();
	if(!batchingStrategy.isBatchingUpdates){
		batchingStrategy.batchedUpdates(enqueueUpdate, component);
		return
	}
	dirtyComponents.push(component);
	if(component._updateBatchNUmber == null){
		component._updateBatchNumber = updateBatchNumber + 1;
	}
}



2. React setState 调用之后发生了什么？是同步还是异步？


在代码中调用setState，React会将传入的参数对象与组件当前的状态合并，然后触发调和过程，经过调和过程。React会以相对高效的方式根据新的状态React元素树并且着手重新渲染整个UI界面。

React得到元素树之后，React会自动计算出新的树和老树的节点差异，然后根据差异对界面进行最小化重新渲染。在差异计算算法中，React能够精确地知道哪些位置发生了改变以及如何改变，这就保证了按需更新，而不是重新渲染。如果短时间频繁setState，React会将state的改变压入栈，在合适的时机，批量更新state和视图，达到提高性能的效果。



7. 在React中组件的this.state和setState有什么区别？


this.state通常是用来初始化state，setState是用来修改state值的。如果直接修改state页面是不会更新的。


9. React组件的state和props有什么区别？



三、生命周期


1. React的生命周期有哪些？



四、组件通信


1. 父子组件的通信方式？



const Child = props => {
	return <p>{props.name}</p>
}
const Parent = () => {
	return <Child name="rect"></Child>
}



const Child = props => {
	const cb = msg => {
		return () => {
			props.callback(msg)
		}
	}
	return {
		<button onClick={cb("你好")}>你好</button>
	}
}

class Parent extends Component {
	callback(msg){
		console.log(msg)
	}
	render(){
		return <Child callback={this.callback.bind(this)}></Child>
	}
	
}


2. 跨级组件的通信方式？


父组件向子组件的子组件通信，向更深层子组件通信：



const BatteryContext = createContext();
// 子组件的子组件
class GrandChild extends Component {
	render(){
		return (
			<BatteryContext.Consumer>
				{
					color => <h1
	style={{"color": color}}我是红色的：{color}></h1>
				}
			</BatteryContext.Consumer>
		
		)
	}
}

// 子组件
const Child = () => {
	return (
		<GrandChild/>
	)
}

// 父组件
class Parent extends Component {
	state = {
		color: "red"
	}
	render(){
		const {color} = this.state;
		return (
			<BatteryContext.Provider value={color}>
				<Child></Child>
			</BatteryContext.Provider>
		)
	}

}


3. 非嵌套关系组件的通信方式？



5. 组件通信的方式有哪些



五、路由


1. React-Router的实现原理是什么？



7. React-Router的路由有几种模式？



六、Redux


1. 对 Redux 的理解，主要解决什么问题


react是视图层框架，redux是一个用来管理数据状态和UI状态的js应用工具。随着js单页应用变得复杂，js需要更多状态，redux就是为了降低管理难度的。

在redux中，提供了一个叫store的统一仓储库，组件通过dispatch将state直接传入store，不用通过其他组件。并且组件通过subscribe从store获取到state的改变，使用了redux，所有的组件都可以从store获取到所需的state，他们也能从store获取到state的改变。

解决的问题：react-redux的作用是将redux的状态机和react的ui绑定在一起，当你dispatch action改变state的时候，会自动更新页面。


2. Redux 原理及工作流程


工作流程


    

  1. view通过dispatch发出action
    2. 

  2. store调用reducer，传入state、action，reduce返回新的state
    3. 

  3. state有了变化，store调用监听函数，更新view
    4. 



9. Redux 和 Vuex 有什么区别，它们的共同思想



七、Hooks


1. 对 React Hook 的理解，它的实现原理是什么


hook让组件实现变得更加简洁。

闭包


2. 为什么 useState 要使用数组而不是对象



3. React Hooks 解决了哪些问题？



八、虚拟DOM


1. 对虚拟 DOM 的理解？虚拟 DOM 主要做了什么？虚拟 DOM 本身是什么？


虚拟DOM是一个React的优化手段，通过在内存中维护一份轻量的DOM副本，实现更高效的渲染和更新机制。

工作流程：



2. React diff 算法的原理是什么？


diff算法是为了找出新旧虚拟DOM之间的差异，以最小化对实际DOM的操作。

算法的核心：



九、其他


5. 对 React 和 Vue 的理解，它们的异同



12. 在React中遍历的方法有哪些？


遍历数组，map&&forEach


arr.map((item, index) => {
	
})

arr.forEach((item, index) => {

})


遍历对象，map for in


for(const key in obj){
	if(obj.hasOwnProperty(key){
		const value = obj[key]
		domArr.push(...)
	})
}

Object.entries(obj).map(([key, value], index)=>{

})


19. 对React SSR的理解


服务端渲染是数据与模板组成的html，即html=数据+模板。将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记混合为客户端上完全交互的应用程序。页面没使用服务渲染，当请求页面时，返回的body为空，之后执行js将html结构注入到body里，结合css显示出来



20. 为什么 React 要用 JSX？


react并没有强制使用jsx，jsx类似一种语法糖，代码更为简洁和清晰。