组件化和 React 高级面试

组件化和 React

本章先带领学生做一个 React 的实例，熟悉 React 开发环境、以及 组件化 的概念。然后，通过实例来讲解 React 的 实现原理，包括 JSX 的本质 、虚拟 DOM 和 JSX 的结合、以及 setState 。最后，对比 vue 和 React ，分析两者的异同。

组件化和 React 高级面试知识点

Think great thoughts and you will be great!

心怀伟大的理想，你将会变得伟大。

知识点

• 是否做过 React 开发？
• React 以及组件化的一些核心概念
• 实现流程

题目

• 说一下对组件化的理解
• JSX 本质是什么？
• JSX 和 vdom 的关系？
• 说一下 setState 的过程
• 阐述一下对 React 和 Vue 的 认识

回顾 React

1. 创建一个基本的React 应用

   Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

   它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：

   npx create-react-app my-app
   cd my-app
   npm start
   

2. 用 React 实现 to-do-list：

import React, {
   Component} from 'react'

class Todo extends Component {
   
    constructor(props) {
   
        super(props)
        this.state = {
   
            list: [],
            title: ''
        }
    }

    render() {
   
        const list = this.state.list
        return (
            <div>
                <input type="text" value={
   this.state.title} onChange