React Learning day01

React 构建用户界面的javascript库，主要用于构建UI界面。Instagram, 2013年开源。

特点：
1、声明式的设计
2、高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3、灵活，跟其他库灵活搭配。
4、JSX，俗称JS里面写HTML，Javascript语法的扩展。
5、组件化，模块化。代码容易复用。
6、单向数据流。没有实现数据的双向绑定。数据》视图》事件》数据

创建项目：

1、通过script引入使用，仅用于学习调试使用。

2、通过react的脚手架，创建项目进行开发，部署。

step1：安装node.js，目的是安装包管理器npm，在CMD中验证是否安装成功：
        npm -v
        npx -v
step2：安装脚手架，并创建项目：
        npx create-react-app my-app
step3：进入项目目录，并运行：
        cd my-app
        npm start

React 元素渲染

1
2
3

let h1 = <h1>helloworld</h1>
使用JSX的写法，可以创建JS元素对象
注意：JSX元素对象，或者组件对象，必须只有1个根元素（根节点）

案例1：

实现页面时刻的显示
function clock() {
  let time = new Date().toTimeString()
  let element = (
    <div>
      <h1>现在的时间是{time} </h1>
      <h2>这是副标题</h2>
    </div>
  )
    
  let root = document.querySelector('#root');
  ReactDOM.render(element,root)
}

clock()

setInterval(clock,1000)

案例2；

// react函数式组件，组件的头字母需要大写
function Clock(props) {
  return (
    <div>
      <h1>现在的时间是{props.date.toTimeString()} </h1>
      <h2>这是函数式组件开发</h2>
    </div>
  )
}

// 组件传值进来，返回的是一个元素
function run() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.querySelector('#root')
  )
}

setInterval(run,1000)

React Jsx

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

注意：
1、JSX必须要有根节点。
2、正常的普通HTML元素要小写。如果大写，默认认为是组件。

JSX表达式

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

案例：

let time = new Date().toLocaleTimeString()
let str = '当前时间是：'
let element = (
  <div>
    <h1>Hello World</h1>
    <h2>{str+time}</h2>
  </div>
)

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


let element4 = (
  <div>
    <span>横着趟</span>
    <span>竖着趟</span>
  </div>
)
man = '正常'
let element3 = (
  <div>
    <h1>今天是否隔离</h1>
    {/* <h2>{man=="发热"?"隔离":"躺床上"}</h2> */}
    <h2>{man=="发热"?<button>隔离</button>:element4}</h2>
  </div>
)


let color = 'bgRed'
let logo =  "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";
// HTML的样式类名，要写className，因为class在JS中是关键词
let element5 = (
  <div className={color}>
    <img src={logo} />
    红色的背景颜色
  </div>
)

ReactDOM.render(
  element5,
  document.getElementById('root')
)

JSX_STYLE 样式

1、class或style中，不可以存在多个class属性

1 2	错误表达式： <div class='abc' class={'active'}>

2、style样式中，如果存在多个单词的属性组合，第二个单词开始，首字母大写。或者，使用引号括起来，否则会报错。

let examplestyle = {
  background: "skyblue",
  borderBottom: "3px solid red",
  "background-image": "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
}

3、多个类共存的操作

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

等同于：
let classStr2 = ['abc2', 'redBg2'].join(" ")
let element3 = (
  <div>
    {/* 这里写注释 */}
    <h1 className={classStr2}>hello world</h1>
  </div>
)

4、注释：必须在括号的表达式内书写，否则报错

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

React 组件

函数式与类组件的区别和使用，函数式比较简单，一般用于静态没有交互内容的组件页面。类组件，一般又称为动态组件，一般会有交互或者数据修改的操作。

1、函数式组件

//函数式组件
function Childcom(props) {
  console.log(props);
  let title = <h2>我是副标题</h2>; 
  let weather = props.weather;
  // 条件判断
  let isGo = weather == '下雨' ? "不出门" : "出门";
  return (
    <div>
      <h1>函数式组件 hello world</h1>
      {title}

      <div>
        是否出门?
        <span>{isGo}</span>
      </div>
    </div>
  )
}

2、类组件

//类组件
class HelloWorld extends React.Component{
  render() {
    console.log(this)
    return (
      <div>
        <h1>类组件定义 Hello World</h1>
        <h1>hello:{this.props.name}</h1>
        <Childcom weather={this.props.weather}></Childcom>
      </div>
    )
  }
}

3、复合组件：组件中又有其他的组件。复合组件中既可以有类组件，也可以有函数组件。

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

//函数式组件
function Childcom(props) {
  console.log(props);
  let title = <h2>我是副标题</h2>; 
  let weather = props.weather;
  // 条件判断
  let isGo = weather == '下雨' ? "不出门" : "出门";
  return (
    <div>
      <h1>函数式组件 hello world</h1>
      {title}

      <div>
        是否出门?
        <span>{isGo}</span>
      </div>
    </div>
  )
}

//类组件
class HelloWorld extends React.Component{
  render() {
    console.log(this)
    return (
      <div>
        <h1>类组件定义 Hello World</h1>
        <h1>hello:{this.props.name}</h1>
        <Childcom weather={this.props.weather}></Childcom>
      </div>
    )
  }
}


// ReactDOM.render(
//   <Childcom weather="出太阳"></Childcom>,
//   document.querySelector('#root')
// )

ReactDOM.render(
  <HelloWorld name="老陈" weather="下雨"></HelloWorld>,
  document.querySelector('#root')
)

React State
（相当于VUE的DATA，但是使用方式与VUE不一致）