react强制刷新component.forceUpdate()一个不常见的生命周期方法，其作用是强制刷新官网。解释如下。默认情况下，当组件的state或props发生变化时，组件将重新渲染。如果render()方法依赖于其他数据，您可以调用forceUpdate()强制组件重新渲染。调用forceUpdate()将导致组件调用render()方法，该方法会跳过组件的shouldComponentUpdate()。但是，它的子组件会触发正常的生命周期方法，包括shouldComponentUpdate()方法。如果标记发生变化，React仍然只会更新DOM。通常，您应该避免使用forceUpdate()并在render()中使用this.props和this.state。shouldComponentUpdate不会在初始化和forceUpdate的时候执行。父组件如何调用子组件中的方法？如果你在方法组件中调用子组件（>=react@16.8），你可以使用useRef和useImperativeHandle：const{forwardRef,useRef,useImperativeHandle}=React;constChild=forwardRef((props,ref)=>{useImperativeHandle(ref,()=>({getAlert(){alert("getAlertfromChild");}}));return

嗨

;});constParent=()=>{constchildRef=useRef();返回();};如果是，要在类组件中调用子组件（>=react@16.4），可以使用createRef:const{Component}=React;classParentextendsComponent{constructor(props){super(props);this.child=React.createRef();}onClick=()=>{this.child.current.getAlert();};render(){return();}}classChildextendsComponent{getAlert(){alert('getAlertfromChild');}render(){返回

你好

;React中Diff算法的原理是什么？原理如下（1）节点间比较。节点包括两种类型：一种是React组件，另一种是HTMLDOM。如果节点类型不同，请按如下方式进行比较。如果HTMLDOM不同，只需将旧的替换为新的即可。如果组件类型不同，则直接使用新组件替换旧组件。如果HTMLDOM类型相同，则进行如下比较。在React中，样式不是一个纯字符串，而是一个对象，这样当样式发生变化时，只需要更改和替换变化的样式即可。修改当前节点后，递归处理该节点的子节点。如果组件类型相同，则进行如下比较。如果组件类型相同，使用React机制处理。一般都是用新的props替换旧的props，然后调用组件的componentWillReceiveProps方法，然后调用之前组件的render方法。节点的比较机制在其子节点上递归地开始。(2)两个列表之间的比较。节点列表中的一个节点发生变化，而React处理得不好。循环遍历新旧列表并找出差异是React唯一可以做到的方法。但是，有一种方法可以降低该算法的复杂性。即在生成节点列表时，为每个节点添加一个key。该key只需要在本节点列表中唯一即可，不需要全局唯一。(3)权衡需要注意的是，上述启发式算法是基于两个假设。相似类型的节点总是生成相同的树，不同类型的节点总是生成不同的树。可以为多个渲染稳定的节点设置键。上面的节点间比较算法基本上就是基于这两个假设实现的。要提高React应用程序的效率，需要根据这两个假设进行开发。传递给setState函数的第二个参数的目的是什么？当setState函数调用完成并且组件开始重新渲染时，将调用此函数。我们可以使用这个函数来监控渲染是否完成：setState((prevState,props)=>{return{streak:prevState.streak+props.count}})redux的缺点是什么，必须由父组件传递，不能像flux那样直接从store中获取.当一个组件的相关数据更新时，即使父组件不需要使用这个组件，父组件仍然会重新渲染，这可能会影响效率，或者需要写复杂的shouldComponentUpdate来进行判断。reduxmiddleware中间件提供了第三方插件的方式来自定义拦截action->reducer的流程。变成action->middlewares->reducer。这种机制允许我们改变数据流，实现异步动作、动作过滤、日志输出、异常报告等功能。redux-logger：提供日志输出redux-thunk：处理异步操作值是promise。详细答案参考前端进阶面试题。有几种方法可以更新组件。this.setState()将在修改状态时更新组件。当子组件的props属性发生变化时，也会触发子组件的更新。什么是React引用？为什么它们很重要refs允许您直接访问DOM元素或组件实例。要使用它们，请向组件添加一个ref属性。如果此属性的值是回调函数，它将接受底层DOM元素或组件的已安装实例作为其第一个参数。它可以存储在组件中。导出类App扩展组件{showResult(){console.log(this.input.value);}render(){return();}}如果属性值是一个字符串，React会将结果显示在组件实例对象的refs属性中，存储一个同名的属性，它是对这个DOM元素的引用。它可以通过本机DOMAPI进行操作。导出类App扩展组件{showResult(){console.log(this.refs.username.value);}render(){return();}}React中refs的作用是什么？refs是React为我们提供的安全访问DOM元素或者某个组件实例的handle，可以给元素添加一个ref属性，然后在回调函数中接受DOM树中元素的句柄。该值将作为回调函数的第一个参数返回。为什么不能在条件判断中放置hook？以setState为例，在react内部，各个组件（Fiber）的hook以链表的形式存储在memoizeState属性的更新阶段。每调用一次setState，链表就会执行next，向后移动一步。如果条件判断中写了??setState，假设条件判断不为真，里面的setState方法没有执行，就会导致后面所有setStates的值发生偏移，从而导致异常。useEffect(fn,[])和componentDidMount之间有什么区别useEffect捕获道具和状态。所以即使在回调函数中，你得到的也是初始的props和state。如果你想获得“最新”值，你可以使用ref.生命周期方法的调用顺序是什么？React生命周期分为三大周期11个阶段，生命周期方法的调用顺序如下。(1)创建期的五个阶段，调用方法的顺序如下。getDefaultProps：定义默认属性数据。getInitialState：初始化默认状态数据。componentWillMount：组件即将被构建。渲染：渲染组件。componentDidMount：组件构建完成（2）在存在期的五个主要阶段，调用方法的顺序如下。componentWillReceiveProps：组件即将接收新的prop数据。shouldComponentUpdate：确定组件是否应该更新。componentWillUpdate：组件即将更新。渲染：渲染组件。componentDidUpdate：组件更新完成。(3)在销毁期的某个阶段，调用componentWillUnmount方法表示组件即将销毁。React性能优化方案重写shouldComponentUpdate，避免不必要的dom操作。使用react.js的生产版本使用keys来帮助React识别列表中所有子组件的最小变化。这三点(...)在React中使用。？...在React（使用JSX）代码中做什么？whatisitcalled这个叫做展开运算符或者扩展运算符，比如this.props中包含a:1和b:2,那么等同于：扩展??符号不仅适用于这种用例，而且对于创建具有现有对象的大部分（或全部）属性的新对象也非常方便，我们在更新时经常这样做state:this.setState((prevState)=>{return{foo:{...prevState.foo,a:"updated"}};});diff算法？按照层级分解树结构，只比较同一层级的元素。为列表结构的每个单元添加一个唯一的键属性，以便于比较。React只会匹配同一个类（这里的类指的是组件的名字）的组件进行合并操作。当调用组件的setState方法时，React会将其标记为-脏。在每个事件循环结束时，React检查所有标签脏组件重绘。选择性子树渲染。开发者可以重写shouldComponentUpdate来提高diff的性能在构造函数中调用super并传入props作为参数的作用是什么？在调用super()方法之前，子类构造函数不能使用this引用，ES6子类也是如此。将props参数传递给super()调用的主要原因是为了能够在子构造函数中通过this.props获取传入的props。传递propsclassMyComponentextendsReact.Component{constructor(props){super(props);控制台日志（this.props）；//{name:'sudheer',age:30}}}没有传递任何道具classMyComponentextendsReact.Component{constructor(props){super();控制台日志（this.props）；//未定义//但Props参数仍然可用console.log(props);//Prints{name:'sudheer',age:30}}render(){//在构造函数之外不受影响console.log(this.props);//{name:'sudheer',age:30}}}上面的例子揭示了一点。props的行为只是在构造函数内部不同，在构造函数之外是一样的。这段代码有什么问题？类App扩展组件{constructor(props){super(props);this.state={username:"友家前端网络",msg:"",};}render(){return

{this.state.消息

;}componentDidMount(){this.setState((oldState,props)=>{return{msg:oldState.username+"-"+props.intro,};});}}render(,ickt)页面正常输出“优客前端网-前端技术专业学习平台”。但是这种写法很少用到，也不是常用的写法。React允许将一个函数传递给setState方法，该方法接收之前的状态和属性数据并返回一个需要修改的状态对象，就像我们上面所做的那样。不仅没有问题，如果当前状态是根据之前的状态（state）和属性修改的，建议使用这种写法。React-Router有多少种形式？有几种形式。HashRouter是通过哈希实现的，路由必须有#。BrowerRouter，使用HTML5中的historyAPI实现，需要服务端支持，兼容性不是很好。如何使用ReactRouter4.0版？在ReactRouter4.0版本中，迁移了hashHistory。执行包安装命令npminstallreact-router-dom后，可以按照如下代码使用。import{HashRouter,Route,Redirect,Switch}from"react-router-dom";classAppextendsComponent{render(){return(

{""}{""}

);}}constroutes=();渲染（路线，ickt）；React中的useState()是什么？useState(0)的用途解释如下：const[count,setCounter]=useState(0);const[moreStuff,setMoreStuff]=useState();constsetCount=()=>{setCounter(count+1);setMoreStuff();};useState是一个内置的ReactHook。useState(0)返回一个元组，其中第一个参数count是计数器的当前状态，setCounter提供了更新计数器状态的方法。我们可以在任何地方使用setCounter方法来更新计数状态——在这种情况下，我们在setCount函数内部使用它来做更多的事情，使用Hooks，我们可以让我们的代码保持更多功能并避免过度使用基于类的组件。