React入门笔记（二）：JSX样式、组件初识

开头

本笔记根据视频进度，由自己手写整理而成，仅限于学习交流。

二、React元素渲染

2.3、React JSX

简单地说，在React中写的JS都可以被称为JSX语言，他对我们的HTML做了扩充。

优点：

1. JSX执行更快，编译为JavaScript代码时进行优化
2. 类型更安全，编译过程如果出错就不能编译，及时发现错误
3. JSX编写模板更加快速

注意：

1. JSX必须要有根节点
2. 正常的普通HTML元素要小写，如果是大写的话React会默认认为是组件

2.4、JSX表达式

JSX中的表达式{}中除了能够放变量，也可以插入表达式、三元运算符、元素渲染、JSX嵌套等

// 数字相加运算
let element = (
  <div>
    <h1>你好</h1>
    <h2>{1+1}</h2>
  </div>
)

//不同类型结合运算
let time = new Date().toLocaleTimeString()
let str = '当前时间是：'
let element = (
  <div>
    <h1>你好</h1>
    <h2>{str+time}</h2>
  </div>
)

//三元表达式
let man = "发热"
let element2 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man === "发热"?"隔离":"躺床上"}</h2>
  </div>
);

//元素渲染
let man = "发热"
let element2 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man === "发热"?<button>隔离</button>:<button>躺床上</button>}</h2>
  </div>
);

//嵌套JSX
let element4 = (
  <div>
    <span>横着躺</span>
    <span>竖着躺</span>
  </div>
)
let man = "不发热"
let element2 = (
  <div>
    <h1>今天是否隔离</h1>
    <h2>{man === "发热"?<button>隔离</button>:element4}</h2>
  </div>
);

JSX中的原生的class变为了className,我们尽量使用更方推荐的写法，因为class在js中是关键词

let color = 'bgRed'
let element5 = (
  <div className={color}>
    红色背景颜色
  </div>
)

总结一下JSX：

1. 由HTML元素构成
2. 中间如果需要输入变量用{}
3. {}中间可以使用表达式
4. {}中间表达式可以使用JSX对象
5. 属性和HTML内容一样都是用{}来插入内容

2.5、JSX style样式

jsx的样式命名有自己的要求，采用驼峰命名法，一个单词和原生css相同，遇到两个单词第二个单词的首字母要大写，如果还是想要原来的写法可以将属性双引号引起来如"background-image":"xxx"

let exampleStyle = {
  background:"skyblue",
  borderBottom: "1px solid red",
  "background-image":"url(xxx)"
}

let element = (
  <div>
    <h1 style={exampleStyle}>你好</h1>
  </div>
)

JSX style支持变量引入，也可以直接使用{{}}内部写css样式,但是统一元素内不能出现两个style,react不会将其合并，叫后的style样式会替换较前的

let exampleStyle = {
  background:"skyblue",
  borderBottom: "1px solid red"
}

let element = (
  <div style={{height:'200px'}}>
    <h1  style={exampleStyle} style={{height:'200px',color:'red'}}>你好</h1>
  </div>
)

同样的className也是如此，不要写重复了

let classStr = "redBg"
let element2 = (
  <div>
    <h1 className={classStr} className="abc">你好</h1>
  </div>
)

如果需要将多个css进行合并，可以用字符串拼接的形式

let classStr = "redBg"
let element2 = (
  <div>
    <h1 className={"abc "+classStr}>你好</h1>
  </div>
)

JSX是支持数组的，我们可以使用数组来将多个class类名进行导入，但是JSX的{}会将数组转化为间隔逗号的字符串，所以我们需要提前对数组进行处理,使用join()函数将数组的元素合并，并把逗号换为空格

let classStr2 = ['abc2','redBg2'].join(" ")
let element3 = (
  <div>
    <h1 className={classStr2}>你好</h1>
  </div>
)

2.6、JSX注释

JSX不支持HTML原生标签注释<!-- -->和//,需要在js注释的基础上外面套一层{}

let classStr2 = ['abc2','redBg2'].join(" ")
let element3 = (
  <div>
    {/*这里写注释*/}
    <h1 className={classStr2}>你好</h1>
  </div>
)

2.7、JSX样式小结

1. class中，不可以存在多个class属性
2. style样式中，如果存在多个单词的属性组合，第二个单词开始首字母大写,或者用引号引起来，否则会报错
3. 多个类共存
4. 注释需要注意，要在{}里面写，否则报错

三、React组件

3.1、函数式组件介绍

来看一个简单的函数式组件

import React from "react";
import ReactDOM from "react-dom";

//函数式组件
function Childcom() {
  let title = <h2>我是副标题</h2>;

  let weather = "下雨天";
  return (
    <div>
      <h1>你好啊</h1>
      {title}
      <div>
        是否出门?
        <span>{weather === "下雨天" ? "不出门了" : "出门"}</span>
      </div>
    </div>
  );
}

ReactDOM.render(
  <Childcom />,
  document.getElementById('root')
)

我们定义了一个函数，返回一个jsx内容，并使用render方法进行渲染，在这里我们需要注意的是，函数式组件的命名以大写字母开头，并且由于是函数式组件，我们在渲染是要将其转化为标签形式，而如果你是一个变量则不需要。

既然组件是一个函数，那么他就能够实现很多的功能，特别是hooks的推出，函数式组件变得十分的强大

3.2、类组件介绍

相对于函数式组件，类组件会麻烦一些，有一些固定的套路，之前是作为主力的组件使用，但是随着新版本hooks的发展，在逐渐的降低使用

同样的我们简单的建立一个react的类组件试试水

...
//类组件定义
class HelloWorld extends React.Component{

  render(){
    return(
      <div>
        <h1>类组件helloworld</h1>
      </div>
    )
  }
}
...

3.3、函数式与类组件的区别

函数式组件特点：

• 代码的可读性更好，减少了大量冗余的代码
• 组件不会被实例化，整体渲染性能得到提升
• 组件不能访问this对象
• 组件无法访问生命周期的方法
• 无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用

类组件的特点：

• 函数this自绑定
• 有生命周期
• 有state

区别：

区别	函数组件	类组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有

3.4、props简单介绍

简单的说，porps适用于传递参数，并且函数式和类组件都支持props,props用于父子组件父向子传递信息

用在函数式组件上：

...
//函数式组件
function Childcom(props) {
  let title = <h2>我是副标题</h2>;

  return (
    <div>
      <h1>你好啊</h1>
      {title}
      <div>
        是否出门?
        <span>{props.weather === "下雨天" ? "不出门了" : "出门"}</span>
      </div>
    </div>
  );
}

ReactDOM.render(<Childcom weather="下雨天"/>, document.getElementById("root"));

用在类组件上：

...
//类组件定义
class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h1>类组件helloworld</h1>
        <Childcom weather={this.props.weather}></Childcom>
        <h1>hello:{this.props.name}</h1>
      </div>
    );
  }
}
ReactDOM.render(<HelloWorld name="chen" weather="下雨天"/>, document.getElementById("root"));