什么是JSX

JSX是JavaScript的一种语法扩展，并拥有JavaScript的全部功能。

JSX生产React元素，可以将任何的JavaScript表达式封装在花括号里面，然后将其嵌入到JSX中，在编译完成后，JSX表达式就变成了常规的JavaScript对象，这意味着可以在if语句和for循环内部使用JSX，将它赋值给变量，接受它作为参数，并从函数中返回它，利用JSX实现虚拟DOM。

示例：一个简单的JSX语法示例

import React from "react";
class App extends React.Component {
  render() {
    let name = "张三";
    let content = "<span>你好</span>"
    return <div className="App">{ name }
     <div dangerouslySetInnerHTML={{__html:content}}></div>
    </div>;
  }
}
export default App;

如何获取DOM

在react中要想获取元素的dom结构：this.refs['name'].innerHTML

import React from "react";
class App extends React.Component {
  // 页面初始化后加载数据
  componentDidMount() {
    console.log(document.getElementById('goods').innerHTML) // 原生js获取
    console.log(this.refs['name'].innerHTML)
  }
  render() {
    let name = "张三";
    return <div className="App">
     <div ref="name">{name}</div>
    </div>;
  }
}
export default App;

这样写只能获取当前页面的DOM，当引入组件获取组件中元素的DOM的时候就不能使用ref来获取，还是要用原生js来获取，否则会报错：

不过这样获取的话，是没有触发虚拟dom的，性能就会低！这时候就用到react中的一个方法ReactDom:

import React from "react";
import ReactDom from "react-dom";
import HeaderComponent from "./components/header";
class App extends React.Component {
  // 初始化加载数据
  componentDidMount() {
    // console.log(this.refs["headerText"].innerHTML);
    // console.log(document.getElementById('headerText'))
    let header = ReactDom.findDOMNode(document.getElementById("headerText"));
    console.log(header);
  }
  render() {
    let name = "张三";
    return (
      <div className="App">
        {name}
        <HeaderComponent></HeaderComponent>
      </div>
    );
  }
}
export default App;

面试中常涉及到的面试题

虚拟DOM的原理

虚拟dom相当于在js和真实dom中间加了一个缓存，将真实的dom转换成json对象，利用dom diff算法避免了没有必要的dom操作，从而提高性能。

react diff的原理

一个diff函数有两个参数，一个是真实dom，一个是虚拟dom，使用递归对：组件，文本节点，非文本节点，属性做比较，如果相同不更新，如果不相同则更新。

对比子节点：子节点和之前的不同，子节点是一个数组，它们可能改变了顺序，或者数量有所变化，我们很难确定要和虚拟dom哪一个作对比，所以我们要给他设置一个key，如果有key，就使用key查找子节点（性能高），如果没有key则按照dom类型进行查找（性能低）。

接下来继续学习react的知识点~

React的学习（二）—— 初学JSX

什么是JSX

如何获取DOM

面试中常涉及到的面试题

虚拟DOM的原理

react diff的原理