React组件的正确打开姿势，以及jsx中style样式写法

React组件的两种创建方式

注意点 引入的组件的名首字母要大写，组件文件要先引入React
构造函数式接收属性要用形参接收，class式不需要，用this.props.xxx获取，class还有类似vue中的data的属性，this.state={}；class式必须有render ，render要有返回值，constructor中要先super()然后在进行操作格式如下

构造函数式 无状态组件(用的不多)

import React from 'react'
export default function hello (props) {
    return <h2>{props.name}-{props.age}</h2>
}

引入

let age = 20
let name = "hongbin"
let skill = ['Vue','React']
let hongbin = {
    age,name,skill
}
const myDiv = <div id="wrap">
    <h1>Hello React</h1>
    <Hello {...hongbin}></Hello>
</div>
ReactDom.render(myDiv,document.getElementById("app"))

class式 有状态组件（推荐，有生命周期，私有数据）

import React from 'react'
export default class Hi extends React.Component {
    constructor(){
        super()
        this.state = {
            hi:"hi"
        }
    }
    render(){
        return <div>
            {this.state.hi}<br/>
            {this.props.skill.map(i => <h3 key={i}>{i}</h3>)}
        </div>
    }
}

引入同构造函数式

<Hi {...hongbin}></Hi>

两种组件形式各有各的优势
构造函数式因为没有生命周期和私有属性，所以速度更快，性能高，适合没有私有值的情况使用
class式组件有生命周期和私有属性，适合用于对值需要操作获取等情况
两者可以相互配合使用

webpack.config.js配置引入时省略文件后缀名和@别名

resolve:{//省去js文件中导入文件的后缀名
        extensions:['.js','.jsx','.json'], //表示引入的文件自动匹配后缀名从数组中的第一项开始匹配
        alias:{//别名
        '@':path.join(__dirname ,'./src')//表示@代表根目录下的src目录
        }
    }

这样引入组件时不需要像这样

import Hello from './components/hello.jsx'

可以这样代替

import Hello from './components/hello'
import Hello from '@/components/hello'

两种组件方式配合使用
比如要对一组数据进行渲染，只用class的方式可以写成

class CommentsWrap extends React.Component {
  constructor() {
    super()
    this.state = {
      lists: [
        { id: 1, user: 'Peter', content: 'Hi i am Peter' },
        { id: 2, user: 'David', content: 'Hi i am David' },
        { id: 3, user: 'Paul', content: 'Hi i am Paul' },
        { id: 4, user: 'Lisa', content: 'Hi i am Lisa' },
        { id: 5, user: 'Caesar', content: 'Hi i am Caesar' },
      ],
    }
  }
  render() {
    return (
      <div>
        {this.state.lists.map((list, index) => {
          return (
            <div key={index}>
              <h3>评论人：{list.user}</h3>
              <h4>评论内容：{list.content}</h4>
            </div>
          )
        })}
      </div>
    )
  }
}

可以看到整体分为两个部分，一部分是需要渲染的数据，一部分是return到页面的jsx标签
可以看到return出去的jsx部分数据是来自组件的state中的值，本身不需要自己私有的值，这样我们就可以把他抽离成一个单独的组件，这样index.js文件中只需要放处理出去的组件就可以了
index.js

import CommentsWrap from '@/components/CommentWrap'

ReactDom.render(
  <div>
    <CommentsWrap></CommentsWrap>
  </div>,
  document.getElementById('app')
)

CommentsWrap组件

import CommentList from '@/components/CommentList'
export default class CommentsWrap extends React.Component {
  constructor() {
    super()
    this.state = {
      lists: [
        {
          id: 1,
          user: 'Peter',
          content: 'Hi i am Peter',
        },
        {
          id: 2,
          user: 'David',
          content: 'Hi i am David',
        },
        {
          id: 3,
          user: 'Paul',
          content: 'Hi i am Paul',
        },
        {
          id: 4,
          user: 'Lisa',
          content: 'Hi i am Lisa',
        },
        {
          id: 5,
          user: 'Caesar',
          content: 'Hi i am Caesar',
        },
      ],
    }
  }
  render() {
    return (
      <div>
        {this.state.lists.map((list, index) => {
          return <CommentList key={index} {...list}></CommentList>
        })}
      </div>
    )
  }
}

CommentList组件

export default function CommentList(props) {
  return (
    <div>
      <h3> 评论人： {props.user} </h3>
      <h4> 评论内容： {props.content} </h4>
    </div>
  )
}

这样每个块单独抽出来，更易于日后代码的维护，也符合模块化开发潮流

jsx的样式
jsx的样式书写格式：

style = {{color:"deepPink"}}

样式的4次抽离
1，

<div style = {{padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"}}>
      <h3 style = {{color:"deepPink"}}> 评论人： {props.user} </h3>
      <h4 style = {{color:"green"}}> 评论内容： {props.content} </h4>
    </div>

2

let wrap = {padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"}
let user = {color:"deepPink"}
let context = {color:"green"}

export default function CommentList(props) {
  return (
    <div style = {wrap}>
      <h3 style = {user}> 评论人： {props.user} </h3>
      <h4 style = {context}> 评论内容： {props.content} </h4>
    </div>
  )
}

3

let style = {
    wrap : {padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"},
    user : {color:"deepPink"},
    context : {color:"green"}
}

export default function CommentList(props) {
  return (
    <div style = {style.wrap}>
      <h3 style = {style.user}> 评论人： {props.user} </h3>
      <h4 style = {style.context}> 评论内容： {props.content} </h4>
    </div>
  )
}

4

import style from '@/components/style'
export default function CommentList(props) {
  return (
    <div style = {style.wrap}>
      <h3 style = {style.user}> 评论人： {props.user} </h3>
      <h4 style = {style.context}> 评论内容： {props.content} </h4>
    </div>
  )
}

components/style.js

export default {
    wrap : {padding:"0.6rem" ,border:"0.0625rem dashed #00f",maxWidth:"50vw",margin:"0.625rem auto"},
    user : {color:"deepPink"},
    context : {color:"green"}
}

最后如果本文对你有用的话欢迎你关注我的公众号，会有各种技术栈的文章