你了解react吗？

面试官：看了下简历，上面写的用的vue栈，那我就不问vue了，问问React吧

我：额。。。，好吧（内心大哭：图片）。

面试官：先说说你对react的了解吧

我: 如果在react中，使用es5开发中，react中经常会使用createElement和render两个函数,其中createElement接受三个参数，分别接受的是接收节点、属性、标签内容，其中在写属性的时候，需要注意如果要增加class属性的时候，需要写className，因为class是保留字。如果在es6中，就可以在script标签上面加上type=“text/babel”，通过引入的babel.js可以将script中的jsx转换成React.createElement(),通常在项目中会写两种组件，有状态的组件(class组件)或者无状态组件（函数式组件），他们的共同点是都有props传值，区别是是否有state、生命周期

面试官：有状态组件和无状态组件怎么使用props？

我：在函数式组件中一般是通过函数接受props，然后通过props.属性名来获取相关的值，如果是class组件一般是在render函数中是通过this.props.属性名来获取，如果需要在构造函数中使用this.props.属性名,就需要在constructor中接收props，在super中加上(props),才能使用。在class组件中一般通过setState来进行数据修改,setState在合成事件中和生命周期中是异步的，在原生函数和setTimeout里面是同步的，可以在用原生事件中、回调函数和定时器中拿到最新的值。

面试官：props在父子组件、兄弟组件、子孙组件传值有了解吗？

我: 在父子组件中，父组件通过属性把函数传递给子组件，子组件可以通过条用this.props.函数名，来触发父组件的事件，从而实现父组件值的更新，同时在子组件中设置propsTypes和defaultProps分别来限制props的类型和默认值.在子孙组件间进行传值,也是同上（只是进行了Props多层传值而已）。还有一种也是组件件的传值，是通过context来实现组件间的传值,通过Provide 进行传入，可以通过组件名.contextType进行接收，或者是把组件通过Customer包裹进行接收，然后通过context就可以获取到相应的值了

面试官：简单说下react的生命周期吧？

我:react的生命周期一般分为以下阶段，初始化阶段(constructor)、组件加载阶段(UNSAFE_componentWillMount(加载前)、render(数据更新或者数据加载)、componentDidMount(加载后))、组件更新阶段(shouldComponentUpdate(组件是否更新)、UNSAFE_componentWillUpdate(更新前)、render(数据更新或者数据加载)、componentDidUpdate(加载后))、组件销毁阶段(componetWillUnmount)

面试官：Hook的作用？

我: hook的作用通常让函数式组件有状态和生命周期，我们可以通过使用useState和useEffect来给函数式组件提供状态和生命周期，useState的第一个参数是获取当前值，第二个参数是一个函数，可以修改并更新当前值,如果接收的是一个数组，尽量把原值拷贝一份，再进行修改更新，避免直接修改原值。useEffect接收两个参数一个参数是回调函数，一个参数是受影响的值，如果第二个参数为空，则回调函数不执行

面试官:React如何获取当前dom?

我:一般可以通过useRef和createRef来获取，他们两个的区别是：createRef获取的时候每次都会新建,useRef获取的时候如果当前dom存在，获取的时候就会直接获取，如果不存在，就会新建。

面试官：React中如何进行状态管理？

我:一般React常用的状态管理有以下三种方法:

第一种是可以通过useReducer进行状态管理，接收两个参数，第一个是处理函数，第二个是默认值。

第二种是可以通过Redux进行状态管理，一般用store来存储数据，通过store里面的reducer初始化并定义state修改规则，可以通过dispatch一个action来提交对数据的修改。

第三种是通过react-redux进行状态管理

面试官：好的，今天面试就到这里吧，有消息会通知的

我：内心呜呜呜，哎，好尴尬，哎，为啥没用过react

关注公众号，可获取更多面试题