react

react
用于构建用户界面的javascript库
安装：

npx create-react-app react-tuts

转到react-tuts目录下

打开项目，删除src目录下的所有文件,新建index.js文件便于我们更好地 理解react的原理

这时输入npm start就可以打开项目

import React from 'react' 
//只要使用jsx的语法都需要引入react，这是顶级api
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Welconme</h1>,	
    //jsx语法把h1渲染到id为root的文件中去
  document.querySelector('#root')
)

把jsx提成一个变量

//可以理解为创建了一个简单的react元素
const app = <h1>Welconme</h1>

ReactDOM.render(
  app,
  document.querySelector('#root')
)

动态改变jsx元素的内容，并传递参数

const createApp = (props) => {
    //在jsx里面写js语法需要加{}，只有这一种语法
  return <h1>Welconme{props.title}</h1>
}

const app = createApp({
  title: '16.8'
})

ReactDOM.render(
  app,
  document.querySelector('#root')
)

下面是使用组件的第一种方式使用箭头函数的原理
函数式组件

//使用箭头函数，但名字要大写开始
const App = (props) => {
  return (
    <div>
      {/* 注释也是使用{} */}
      <h1>Welconme{props.title}</h1>
      <p>{props.title}</p>
    </div>
  )
}

ReactDOM.render(
  <App title="2019"/>,
  document.querySelector('#root')
)

类组件

import React from 'react'
import { render } from 'react-dom'

//第二种方法，使用类继承react下的component
class App extends React.Component {
  render () {
    return  <h3>类组件!!!</h3>
  }
}

//render是react dom提供的一个方法，这个方法通常只会渲染一次
render(
  <App />,
  document.querySelector('#root')
)

• 传递参数

import React from 'react'
import { render } from 'react-dom'

//第二种方法，使用类
class App extends React.Component {
  render () {
    return  (
      <div>
        <h3>类组件!!!</h3>
        {/* 使用this.props接受，因为渲染出来的是类的实例 */}
        <p>{this.props.desc}</p>  
      </div>
    )
  }
}

render(
  <App desc="类组件是继承React.components的"/>,
  document.querySelector('#root')
)
  

new一个实例

import React，{component} from 'react'
import { render } from 'react-dom'

//第二种方法，使用类
class App extends Component {
  render () {
    return  (
      <div>
        <h3>类组件!!!</h3>
        {/* 使用this.props接受，因为渲染出来的是类的实例 */}
        <p>{this.props.desc}</p>
      </div>
    )
  }
}
//类组件渲染的原理
// 因为app不是一个element所以必须要调实例的render方法
const app = new App({
  desc:'类组件是继承React.Component的1'
}).render()

render(
  app,
  document.querySelector('#root')
)
  

• 在react6以前使用的是这种方式来创建一个类组件

React.createClass({
    render <h3>类组件!!!</h3>
})

jsx的原理

• 嵌套组件

import React from 'react'
import { render } from 'react-dom'

const Header = () => <h3>类组件!!!</h3>

//第二种方法，使用类
class App extends React.Component {
  render () {
    return  (
      <div>
        <Header/>
        {/* 使用this.props接受，因为渲染出来的是类的实例 */}
        <p>{this.props.desc}</p>
      </div>
    )     
  } 
}

const app = new App({
  desc:'类组件是继承React.Component的1'
}).render()

render(
  // 因为app不是一个element所以必须要调实例的render方法
  app,
  document.querySelector('#root')
)
  

虚拟dom树

import React from 'react'
import { render } from 'react-dom'

//这里使用类的形式创建的组件这是jsx的语法，但不是合法的javascript代码
class App extends React.Component {
  render () {
    return  (
      <div classname="app" id="appRoot">
        <h3 classname="title">类组件!!!</h3>
        <p>类组件是继承React.Component的</p>
      </div>
    )
  }
}

//表示一个虚拟dom树
const appVDom = {
  tag: 'div',
  attrs: {
    className: 'app',
    id: 'appRoot'
  },
  children: [
    {
      tag: 'h3',
      attrs: {
        className: 'title'
      },
      children: [
        '类组件!!!'
      ]
    },{
      tag: 'p',
      attrs: null,
      children: [
        '类组件是继承React.Component的'
      ]
    }
  ]
}


render(
  document.querySelector('#root')
)
  

所以react在真正渲染的时候会把上面的代码成下面这个样子，这是合法的js代码

class App extends Component {
  render () {
    return (
        // React.createElement是一个方法，用于创建元素，可以有很多参数，但前两个是固定的
        //第一个为标签名
        //第二个为标签的属性
      React.createElement(
        'div',
        {
          className: 'app',
          id: 'appRoot'
        }
      ),
      React.createElement(
        'h3',
        {
          className: 'title',
        },
        '类组件'
      ),
      React.createElement(
        'p',
        null,
        '类组件是继承React.Component的'
      )
    )
  }
}

元素中的样式

import React, { Component } from 'react'
import { render } from 'react-dom'


class App extends React.Component {
  render () {
    const style = {color: '#f00'}
    return  (
     <div>
        //也可以写成这样
        //<h1 style={{color: '#f00'}}>样式</h1>
        //第一个{}告诉jsx这是一个js 第二个{}表示是一个对象
       <h1 style={style}>样式</h1>
     </div>
    )
  }
}

render(

也可以独立为一个文件

import React, { Component } from 'react'
import { render } from 'react-dom'

import './index.css'
class App extends React.Component {
  render () {
    const style = {color: '#f00'}
    return  (
     <div>
       <h1>样式</h1>
       <ol>
        <li style={style}>使用style内联样式</li>
        <li className="has-text-red">使用class的方式，但在react中class要写成className</li>
       </ol>
     </div>
    )
  }
}

render(
  <App />,
  document.querySelector('#root')
)