React基础之组件与元素、组件的组合与嵌套、组件添加样式、配置sass

React元素与组件

---

• 1.元素：VDOM，是React的最小组成部分
  • const vdom = <div>React组件</div>
• 2.组件

  • 函数式组件（ 无状态组件 PureComponent）

    • 函数式组件，函数 可以是一个组件，体现函数式编程

    • 组件是由元素构成的

    • 函数式组件由一个参数props，来接收绑定在组件上生成的属性

    • 由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为一个方法，让这个方法去return一个元素:

      import React from 'react'
      import ReactDOM from 'react-dom'
      
      // 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是一样，并且可以多层嵌套
      const app = (props) => <h1>欢迎进入{props.name}的世界</h1>
      
      ReactDOM.render(
        app({
          name: 'react'
        }),
        document.getElementById('root')
      )
      

    • 这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件，这也是无状态组件。但是这种写法不符合react的jsx的风格，更好的方式是使用以下方式进行改造：

      import React from 'react'
      import ReactDOM from 'react-dom'
      
      const App = (props) => <h1>欢迎进入{props.name}的世界</h1>
      
      ReactDOM.render(
        // React组件的调用方式
        <App name="react" />,
        document.getElementById('root')
      )
      

  • 类组件

    • ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用的类的继承，ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：

      import React from 'react'
      import ReactDOM from 'react-dom'
      
      class App extends React.Component {
        render () {
          return (
            // 注意这里得用this.props.name, 必须用this.props
            <h1>欢迎进入{this.props.name}的世界</h1>
        	)
        }
      }
      ReactDOM.render(
        <App name="react" />,
        document.getElementById('root')
      )
      

运行结果和之前完全一样，因为JS里没有真正的class，这个class只是一个语法糖, 但二者的运行机制底层运行机制不一样。

• 函数式组件是直接调用, 在前面的代码里已经有看到

  • es6 class组件其实就是一个构造器,每次使用组件都相当于在实例化组件，像这样：

    import React from 'react'
    import ReactDOM from 'react-dom'
    
    class App extends React.Component {
      render () {
        return (
      		<h1>欢迎进入{this.props.name}的世界</h1>
      	)
      }
    }
    
    const app = new App({
      name: 'react'
    }).render()
    
    ReactDOM.render(
      app,
      document.getElementById('root')
    )
    

  • 在16以前的版本还支持这样创建组件, 但现在的项目基本上不用

    // react  15.x
    React.createClass({
      render () {
        return (
          <div>{this.props.xxx}</div>
      	)
      }
    })
    

• render的作用：渲染jsx——》createElement——》VDOM对象模型

• 注释：{/* 这里是注释语句 */}

• Fragment：充当最外层的元素唯一子元素，性能优化的一种手段

组件的组合和嵌套

---

• 组件的嵌套式指: 将子组件在父组件的jsx中以标签的形式使用
• 组件的组合是指：将一个组件写在另一个组件的内容中，然后在外层组件中通过 this.props.children来接收内容中的组件【推荐】
  • 组件的组合类似于Vue的solt，但是不能实现命名插槽，即没有**命名分发机制 **

组件中添加样式

---

• 1.行内样式
  • 样式与使用写在一起：
    • <p style = {{ width: '100px', height: '100px', background: 'pink' }}></p>
      • 外层{}表示js语法
      • 内层{}表示样式对象（键值对）
  • 样式与使用分开写：
  • 在组件最开始部分写：
    • styled = { width:'100px' }
  • <p style = { this.styled }></p>
• 2.外部链接——使用类名

  • 引入外部样式：import 'css文件'

    .bg{
      background: greenyellow;
    }
    .size{
      width: 100px;
      height: 100px;
    }
    

  • <p className = { 'bg size' }></p>或<p className = { 'bg ' && 5>3?size }></p>

• 3.第三方包——classNames
  • $ yarn add className -D
  • 在React里只要引用CSS样式则为全局样式
• 4.样式组件——第三方：styled-components
  • $ yarn add styed-component

React中全局配置sass

---

• $ yarn add node-sass sass-loader -D
• cnpm i node-sass sass-loader