对有状态组件和无状态组件的理解及使用场景（一）有状态组件特点：类组件有继承，可以用this，也可以用反应的生命周期。很多，容易频繁触发生命周期钩子函数，影响内部使用状态的性能，维护自身状态的变化，有状态组件根据外部组件传入的props和自身进行渲染状态。使用场景：需要使用状态。需要使用状态操作组件（无状态组件也可以实现新版reacthooks）总结：类组件可以维护自己的状态变量，即组件的状态。类组件也有不同的生命周期方法，可以让开发者在组件的不同阶段（挂载、更新、卸载）对组件有更多的控制。类组件既可以充当无状态组件，也可以充当有状态组件。当类组件不需要管理自己的状态时，也可以称为无状态组件。(2)无状态组件特点：不依赖于自身的状态可以是类组件，也可以是函数组件。this关键字可以完全避免。（由于使用了没有绑定的箭头函数事件）具有更高的性能。当不需要使用生命周期钩子时，首先应该使用无状态函数组件，组件内部不维护状态，只根据外部组件传入的props渲染组件。当道具改变时，组件重新渲染。使用场景：组件无需管理状态，纯展示优点：简化代码，专注渲染组件无需实例化，无生命周期，提升性能。输出（渲染）只依赖于输入（属性），无副作用View与数据解耦分离缺点：不能使用没有生命周期方法的ref不能控制组件的重新渲染，因为不能使用shouldComponentUpdate方法，当组件接收到新的属性时有时会重新渲染总结：有内部状态而与外部无关的组件可以考虑使用状态组件，这样状态树就不会太复杂，便于理解和管理.当一个组件不需要管理自己的状态，即无状态组件时，应该先设计成功能组件。比如自定义、等组件。前端React面试题的详细解答描述了React中是如何处理事件的。为了解决跨浏览器兼容性问题，React中的事件处理程序将传递SyntheticEvent的实例，它是跨浏览器事件的包装器。这些SyntheticEvents具有与您习惯的本机事件相同的界面，并且它们在所有浏览器中都兼容。React实际上并没有将事件附加到子节点本身。相反，使用单个事件侦听器通过事件委托模式在顶层侦听所有事件。这对性能有好处。这也意味着React无需担心在DOM更新时跟踪事件监听器。如何在ReactJS中对Props应用验证？当应用程序以开发模式运行时，React会自动检查我们在组件上设置的所有props以确保它们具有正确的数据类型。对于不正确的类型，在开发模式下会在控制台中生成警告消息，并在生产模式下因性能影响而禁用。强制道具是用isRequired定义的。以下是一组预定义的prop类型：React.PropTypes.stringReact.PropTypes.numberReact.PropTypes.funcReact.PropTypes.nodeReact.PropTypes.bool例如，我们为用户定义了以下propTypesimportPropTypesfrom"prop-types"成分;用户类扩展React。Component{render(){return(<>

欢迎，{this.props.name}

年龄，{this.props.age}

);}}User.propTypes={姓名：PropTypes.string.isRequired，年龄：PropTypes.number.isRequired，};在React中，refs的作用是什么？Refs可用于获取对DOM节点或React组件的引用。何时使用refs的好例子是管理焦点/文本选择、触发命令动画或与第3方DOM库集成。您应该避免使用字符串引用和内联引用回调。React推荐使用Refs回调。React中的Portal是什么？门户提供了一种很好的方式来将子节点呈现给DOM节点而不是父组件。第一个参数(child)是任何可渲染的React子元素，例如元素、字符串或片段。第二个参数（容器）是一个DOM元素。ReactDOM.createPortal(child,container)如何使用React.createElement改写如下代码问题：constelement=(你好，rdhub.cn！);答：constelement=React.createElement('h1',{className:'greeting'},'你好，rdhub.cn!');什么是Children在JSX表达式中，一个开始标签（如）和一个结束标签（如）将作为一个特殊属性props.children自动传递给包含组件。这个属性有很多可用的方法，包括React.Children.map、React.Children.forEach、React.Children.count、React.Children.only、React.Children.toArray。什么是纯函数（purefunction）纯函数是一种不依赖也不改变其作用域外变量状态的函数，这也意味着纯函数对于相同的参数总是返回相同的结果。使用箭头函数（arrowfunctions）有什么好处作用域安全：在箭头函数之前，每个新创建的函数都有自己的this值（在构造函数中是new对象；在严格模式下，在函数调用中this是undefined；如果函数被称为“对象方法”、底层对象等），但箭头函数没有，它使用封闭执行上下文的this值。简单性：箭头函数易于阅读和编写清晰：当一切都是箭头函数时，任何常规函数都可以立即用于定义范围。开发者随时可以通过查找next-higherfunction语句来查看这个（组件的）状态（state）和属性（props）的值的区别State是组件挂载时需要的数据结构默认值对于数据。状态可能会随时间发生变化，但主要是用户事件行为的结果。Props（属性的缩写）是组件的配置。Props是从父组件传递给子组件的，对于子组件而言，props是不可变的。组件不能改变自己的props，但可以将其子组件的props放在一起（统一管理）。Props不仅仅是数据——回调也可以作为props传递。当你想要配置webpack或babel预设时，什么会促使你摆脱create-react-app依赖。指出不同的componentWillMount（组件）生命周期方法——多用于根组件componentDidMount中的应用配置——在这里可以完成所有离DOM不行的配置，并开始获取所有数据你需要;如果你需要设置事件监听也可以在这里完成因为如果组件接收到新的props，这会阻止（组件）重新渲染。shouldComponentUpdate应该返回一个布尔值以确定组件是否应该重新渲染componentWillUpdate——很少使用。可以用来替代componentWillReceiveProps和shouldComponentUpdate（但不能访问之前的props）componentDidUpdate--常用于更新DOM，响应prop或state的变化componentWillUnmount--这里可以取消网络请求，或者移除所有相关组件什么是反应参考？为什么它们很重要refs允许您直接访问DOM元素或组件实例。要使用它们，请向组件添加一个ref属性。如果此属性的值是回调函数，它将接受底层DOM元素或组件的已安装实例作为其第一个参数。它可以存储在组件中。导出类App扩展组件{showResult(){console.log(this.input.value);}render(){return(

(this.input=input)}/>显示结果