react 基础知识

是什么？

　　是一个快速构建前端视图的JavaScript库，核心思想就是封装组件，各个组件维护自己的状态和UI，状态变更自动重新渲染组件。

JSX

　　jsx是HTML与js的结合，它可以更加直观形象的表示dom

　　语法特性：使用{}来区分xml还是js，遇到<当成标签解析，遇到{}当成js解析

　　例：

　　　　<div>     //数据list要提前声明在state里

                        {

                            this.state.list.map((item,key)=><li key={key}>

                            <img src={item.url}></img>

                            <span>{item.text}</span>

                        </li>)

                        }

                    </div>
　　jsx允许在模块中插入数组，数组会展开所有成员。

react中使用jsx

　　类名：class变成了className=““

　　tabel标签的for属性变成了htmlFor

　　循环数组要加key属性

　　标签的属性如果为变量，不需要加引号直接用花括号包住变量即可

Virtual DOM  （虚拟DOM）

　　由于真实DOM节点操作成本太大，当状态更改时react的render方法会重新渲染整个组件，所以 React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

react的两个核心方法：
　　react.createElement(类标签,属性,子节点..)   创建虚拟DOM

　　reactDom.render(虚拟DOM,挂载点,回调函数)

组件：

　　分为函数式组件、类组件

　　函数式组件首先是一个函数，必须返回一个虚拟DOM

　　类组件：

　　引入：import React, { Component } from 'react'

　　按照类的方式创建并继承component

　　class index extends Component {

　　　　state={

　　　　　　存放数据与状态

　　　　}

　　　　render(){

　　　　　　return(

　　　　　　　　<div></div>

　　　　　　)

　　　　}

　　}　　

　　export default index 

获取state：this.state.属性名

修改state：this.setState({

　　要修改的属性：新值

},()=>{})

react对事件进行了封装

　　书写方式为驼峰式：onClick、onChang、onInput...

事件绑定：

　　<div onClick={()=>{}}></div>

获取dom节点：

constructor(props) {

        super(props);

　　this.testRef = React.createRef()

    }