Reacte 原理

react

安装：

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(
  
Welconme
,    
    //jax语法把h1渲染到id为root的文件中去
  document.querySelector('#root')
)

把jsx提成一个变量

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

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

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

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

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

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

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

函数式组件

//使用箭头函数，但名字要大写开始
const App = (props) => {
  return (
    

      {/* 注释也是使用{} */}
      
Welconme{props.title}
      
{props.title}
    
  )
}

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

类组件

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

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

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

• 传递参数

  import React from 'react'
  import { render } from 'react-dom'
  
  //第二种方法，使用类
  class App extends React.Component {
    render () {
      return  (
        
  
          
  类组件!!!
          {/* 使用this.props接受，因为渲染出来的是类的实例 */}
          
  {this.props.desc}
        
      )
    }
  }
  
  render(
    ,
    document.querySelector('#root')
  )
    
  

  new一个实例

  import React，{component} from 'react'
  import { render } from 'react-dom'
  
  //第二种方法，使用类
  class App extends Component {
    render () {
      return  (
        
  
          
  类组件!!!
          {/* 使用this.props接受，因为渲染出来的是类的实例 */}
          
  {this.props.desc}
        
      )
    }
  }
  //类组件渲染的原理
  const app = new App({
    desc:'类组件是继承React.Component的1'
  }).render()
  
  render(
    // 因为app不是一个element所以必须要调实例的render方法
    app,
    document.querySelector('#root')
  )
    
  

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

  React.createClass({
      render 
  类组件!!!
  })
  

jsx的原理

• 嵌套组件

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

const Header = () => 
类组件!!!

//第二种方法，使用类
class App extends React.Component {
  render () {
    return  (
      

        

        {/* 使用this.props接受，因为渲染出来的是类的实例 */}
        
{this.props.desc}
      
    )
  } 
}

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  (
      

        
类组件!!!
        
类组件是继承React.Component的
      
    )
  }
}

//表示一个虚拟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  (
     

        //也可以写成这样
        //
样式
        //第一个{}告诉jsx这是一个js 第二个{}表示是一个对象
       
样式
     
    )
  }
}

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  (
       
  
         
  样式
         
  
          
  使用style内联样式
          
  使用class的方式，但在react中class要写成className
         
       
      )
    }
  }
  
  render(
    ,
    document.querySelector('#root')
  )
    
  
  

• 下载class包

  npm i classnames --save
  

  import React, { Component } from 'react'
  import { render } from 'react-dom'
  import classNames from 'classnames'
  
  import './index.css'
  class App extends React.Component {
    render () {
      const style = {color: '#f00'}
      return  (
       
  
         
  样式
         
  
          
  使用style内联样式
          
  使用class的方式，但在react中class要写成className
          
  动态添加className使用classNames
         
       
      )
    }
  }
  render(
    ,
    document.querySelector('#root')
  )
    
  

• style-component 把样式独立出来

  npm i style-component
  

  import React, { Component } from 'react'
  import { render } from 'react-dom'
  import classNames from 'classnames'
  import styled from 'styled-components'
  import './index.css'
  
  const Title = styled.h1`
    color:#ff0
  `
  
  class App extends Component {
    render () {
      const style = {color: '#f00'}
      return  (
       
  
         
         
  
          
  使用style内联样式
          
  使用class的方式，但在react中class要写成className
          
  动态添加className使用classNames
          
  styled-component的使用
         
       
      )
    }
  }
  render(
    ,
    document.querySelector('#root')
  )
    
  
  

安装ES7 React插件

这时就可以使用rcc快速创建类组件

或者使用rfc快速创建函数型组件