前言
本文篇幅较长,全是干货,建议亲们可以先收藏慢慢看哦
写文不易,欢迎大家一起交流,喜欢文章记得关注我点个赞哟,感谢支持!
Q1 :什么是虚拟DOM?
难度::star:
虚拟DOM(VDOM)它是真实DOM的内存表示,一种编程概念,一种模式。它会和真实的DOM同步,比如通过ReactDOM这种库,这个同步的过程叫做调和(reconcilation)。
虚拟DOM更多是一种模式,不是一种特定的技术。
:link: 参考资料:
Q2 :类组件和函数组件之间有什么区别?
难度::star::star:类组件( Class components )无论是使用函数或是类来声明一个组件,它决不能修改它自己的 props 。所有 React 组件都必须是纯函数,并禁止修改其自身 props 。
React是单项数据流,父组件改变了属性,那么子组件视图会更新。属性 props 是外界传递过来的,状态 state 是组件本身的,状态可以在组件中任意修改
组件的属性和状态改变都会更新视图。
class Welcome extends React.Component {
render() {
return (
Welcome { this.props.name }
);
}
}
ReactDOM.render(, document.getElementById('root'));函数组件(functional component)函数组件接收一个单一的 props 对象并返回了一个React元素
function Welcome (props) { return
Welcome {props.name}
} ReactDOM.render(, document.getElementById('root'));区别
函数组件和类组件当然是有区别的,而且函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件。
区别函数组件类组件是否有this没有有是否有生命周期没有有是否有状态state没有有
:link: 参考资料:
Q3 :React中的refs作用是什么?
难度::star::star:
Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:
class UnControlledForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
type='text'
ref={(input) => this.input = input} />
Submit
)
}
}
上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:
function CustomForm ({handleSubmit}) {
let inputElement
return (
handleSubmit(inputElement.value)}>type='text'
ref={(input) => inputElement = input} />
Submit
)
}
Q4 :描述React事件处理。
难度::star::star:
为了解决跨浏览器兼容性问题,React中的事件处理程序将传递SyntheticEvent实例,该实例是React跨浏览器本机事件的跨浏览器包装器。这些综合事件具有与您惯用的本机事件相同的界面,除了它们在所有浏览器中的工作方式相同。
有点有趣的是,React实际上并未将事件附加到子节点本身。React将使用单个事件侦听器在顶层侦听所有事件。这对性能有好处,也意味着React在更新DOM时无需担心跟踪事件监听器。
Q5 :state 和 props有什么区别?
难度::star::star:
state 和 props都是普通的JavaScript对象。尽管它们两者都具有影响渲染输出的信息,但它们在组件方面的功能不同。即prop