react 学习笔记1
React 构建用户界面的JavaScript库，主要用于构建UI界面。Instagram，2013年开源。
特点：
1、声明式的设计
2、高效，采用虚拟DOM来实现DOM的渲染，最大限度的减少DOM的操作。
3、灵活，跟其他库灵活搭配使用。
4、JSX，俗称JS里面写HTML，JavaScript语法的扩展。
5、组件化，模块化。代码容易复用，2016年之前大型项目非常喜欢react
6、单向数据流。没有实现数据的双向绑定。数据-》视图-》事件-》数据
创建项目
1、通过script引入使用，仅用于学习调试使用
2、通过react的脚手架，创建项目进行开发，部署。
1.安装脚手架Create React App。
cnpm install -g create-react-app
2.创建项目
create-react-app 01reactapp(项目名称可以自定义)
React元素渲染
let h1 =
helloworld
;使用JSX的写法，可以创建JS元素对象
注意：JSX元素对象，或者组件对象，必须只有1个根元素（根节点）
案例使用：
//实现页面时刻的显示
function clock(){
let time = new Date().toLocaleTimeString()
let element = (
现在的时间是{time}
这是副标题
)
let root = document.querySelector('#root');
ReactDOM.render(element,root)
}
clock()
setInterval(clock,1000)
函数式组件渲染
function Clock(props){
return (
现在的时间是{props.date.toLocaleTimeString()}
这是函数式组件开发
)
}
function run(){
ReactDOM.render(
document.querySelector('#root')
)
}
setInterval(run,1000)
React Jsx
优点：
1、JSX执行更快，编译为JavaScript代码时进行优化
2、类型更安全，编译过程如果出错就不能编译，及时发现错误
3、JSX编写模板更加简单快速。（不要跟VUE比）
注意：
1、JSX必须要有根节点。
2、正常的普通HTML元素要小写。如果是大写，默认认为是组件。
JSX表达式
1、由HTML元素构成
2、中间如果需要插入变量用{}
3、{}中间可以使用表达式
4、{}中间表达式中可以使用JSX对象
5、属性和html内容一样都是用{}来插入内容
案例
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css'
let time = new Date().toLocaleTimeString()
let str = '当前时间是：'
let element = (
helloworld
{str+time}
)
console.log(element)
let man = '发热';
let element2 = (
今天是否隔离
{man=="发热"?:"躺床上"}
)
//let man = '发热';
let element4 = (
横着躺
竖着躺
)
man = '正常'
let element3 = (
今天是否隔离
{man=="发热"?:element4}
)
let color = 'bgRed'
let logo = 'https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png'
//HTML的样式类名要写className,因为class在js当中是关键词
let element5 = (
红色的背景颜色
)
ReactDOM.render(
element5,
document.getElementById('root')
)
JSX_style 样式
1、Class，style中，不可以存在多个class属性
2、style样式中，如果存在多个单词的属性组合，第二个单词开始，首字母大写。或者用引号引起来，否则会报错。
let exampleStyle = {
background:"skyblue",
borderBottom:"4px solid red",
'background-image':"url(https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png)"
}
3、多个类共存的操作
let element2 = (
<h1 className={"abc "+classStr}>helloworld
)
let classStr2 = ['abc2','redBg2'].join(" ")
let element3 = (
{/* 这里写注释 */}
)
4、注释
必须在括号的表达式内书写，否则报错：{/* 这里写注释 */}
let classStr2 = ['abc2','redBg2'].join(" ")
let element3 = (
{/* 这里写注释 */}
)
React组件
函数式组件与类组件的区别和使用，函数式比较简单，一般用于静态没有交互事件内容的组件页面。类组件，一般又称为动态组件，那么一般会有交互或者数据修改的操作。
1、函数式组件
//函数式组件
function Childcom(props){
console.log(props)
let title =
我是副标题
let weather = props.weather
//条件判断
let isGo = weather=='下雨' ?"不出门":"出门"
return (
函数式组件helloworld
{title}
是否出门？
{isGo}
)
}
2、类组件
//类组件定义
class HelloWorld extends React.Component{
render(){
console.log(this)
return (
类组件定义HELLOWORLD
hello:{this.props.name}
)
}
}
3、复合组件：组件中又有其他的组件，复合组件中既可以有类组件又可以有函数组件。
import React from 'react';
import ReactDOM from 'react-dom';
import './04style.css';
//函数式组件
function Childcom(props){
console.log(props)
let title =
我是副标题
let weather = props.weather
//条件判断
let isGo = weather=='下雨' ?"不出门":"出门"
return (
函数式组件helloworld
{title}
是否出门？
{isGo}
)
}
//类组件定义
class HelloWorld extends React.Component{
render(){
console.log(this)
//返回的都是JSX对象
return (
类组件定义HELLOWORLD
hello:{this.props.name}
)
}
}
// ReactDOM.render(
//
// document.querySelector('#root')
// )
ReactDOM.render(
document.querySelector('#root')
)
React State
相当于VUE的DATA,但是使用方式跟VUE不一致。
