react.js基本使用

核心概念

虚拟dom

用js对象模拟页面上的元素，并提供操作dom对象的api，能够使页面高效刷新

解决问题？

传统的渲染方案

方案一：手动for循环整个数组，然后手动拼接字符串

方案二：使用模板引擎，art-template

当内存中的数据更新时（例如数组排列顺序发生改变），要求重新渲染，这就出现了性能问题

如何解决？按需渲染页面，程序员手动模拟新旧两颗dom树（内存变化前后），进行比较

 

diff算法

目的：实现高效对比

tree diff 新旧两颗dom树，逐层对比的过程，就是Tree Diff；当整颗dom树对比完毕，则就能找到按需更新的元素

component diff tree diff的过程中，每一层进行组件的对比 如果对比前后，组件类型相同，则暂时认为此组件不需要被更新 如果对比前后，组件类型不同，则移除旧组件，创建新组件,并追加到新组件上

element diff 在进行组件对比时，如果两个组件类型相同，则需要进行元素级别的比较

 

添加依赖

cnpm i react react-dom -S

  import React from 'react'
  import ReactDOM from 'react-dom'

 

如何使用

创建虚拟Dom元素
 

const myh1 = React.createElement('h1', { title: '啊，五环', id: 'myh1' }, '你比四环多一环')

<div id="app"></div>

渲染

ReactDOM.render(myh1, document.getElementById('app'))

// 参数1： 表示要渲染的虚拟DOM对象
// 参数2： 指定容器,注意：这里不能直接放 容器元素的Id字符串，需要放一个容器的DOM对象

 

组件

组件的构建

组件构建方式一：函数声明直接构建

function Hello () {
      // return null
      return <div>Hello 组件</div>
  }

组件构建方式二：使用class关键字

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
class 组件名称 extends React.Component{
    construtor(){
        super()
        this.state = { msg:'大家好'}    //这里的数据都是可读可写的
    }
    render(){
        return <div>{this.props.name}<div>    //props是父组件传递过来的
    }
}
ReactDOM.render(){
}

 

单独抽离出.jsx文件

exprot default Hello

 

两种组件的区别

使用class关键字创建的组件（有状态组件）有自己的私有属性，无状态组件，前者有生命周期，后者运行效率高

 

组件的数据传递
 

<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

function Hello(props) {
    // props.name = 'zs'
    console.log(props)
    // 结论：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；
    return <div>这是 Hello 组件 --- {props.name} --- {props.age} --- {props.gender}</div>}

 

组件的css

抽取

const itemStyle = { color: 'red'}
style={ itemStyle }   

 

外链

import cssobj from  './css/cmtlist.css'

 

模板技术

JSX

就是符合 xml 规范的 JS 语法 js代码必须用{}包裹
{ title }    { arr }

 

安装 `babel` 插件

 

- 运行`cnpm i babel-core babel-loader babel-plugin-transform-runtime -D`
- 运行`cnpm i babel-preset-env babel-preset-stage-0 -D`
+ 运行`cnpm i babel-preset-react -D`
rules: [
           { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
  ]

遍历

array.forEach(function(item,index,arr){
});     ++字符串    //或者push到数组中

{arrStr.map(item=>{
    return <h1>{item}</h1>
})}

组件间的区别可以看：https://www.w3cplus.com/react/stateful-vs-stateless-components.html