环境搭建:
npm i -g create-react-app
create-react-app myapp
cd myapp
npm start
一、简介
1)简介
React主要用于构建UI。你可以在React里传递多种类型的参数,如声明代码,帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
2)特点
优势
-
声明式设计 −React采用声明范式,可以轻松描述应用。
命令式编程:命令“机器”如何去做事情(how),这样不管你想要的是什么(what),它都会按照你的命令实现。类似jquery 操作DOM,创建一个页面,一点点的告诉DOM 怎么去挂载,你要怎么去做;JQ\原生 都是命令式编程,都是在做DOM 操作。 声明式编程:告诉“机器”你想要的是什么(what),让机器想出如何去做(how)。
-
高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
1.虚拟DOM(Virtual DOM) 用js 对象来模拟页面上的DOM 和DOM嵌套**实现DOM 元素的高效更新 2.Diff 算法 tree diff component diff element diff
-
灵活 −React可以与已知的库或框架很好地配合。
-
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
-
组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
- 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
劣势
-
学习成本很高,学习曲线很陡
-
react本身能做的事并不多,想做大东西必须得用react插件(全家桶)
二、JSX
(一) 介绍
全称: JavaScript XML,是一个看起来很像 XML 的 JavaScript 语法扩展。
优点:
-
JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
-
它是类型安全的,在编译过程中就能发现错误。
-
使用 JSX 编写模板更加简单快速。
作用:
用来创建react虚拟DOM(元素)对象:
-
let el = <h1>Hello JSX!</h1>;
-
注意1: 它不是字符串, 也不是HTML/XML标签
-
注意2: 它最终产生的是一个JS对象
-
标签名任意: HTML标签或其它标签
-
标签属性任意: HTML标签属性或其它
babel.js的作用:
-
浏览器的js引擎是不能直接解析JSX语法代码的, 需要babel转译为纯JS的代码才能运行
-
只要用了JSX,都要加上type="text/babel", 声明需要babel来处理
(二) JSX语法
JavaScript + XML语法(HTML)
解读jsx语法:
1.遇到<>就会按照HTML语法解析为标签
- 如果是html语法标准的标签就会解析为同名元素 (注意nav article等h5新标签名)
- 如果是其他标签(组件)需要特别解析
- <App/> 这个代码的意义是 new App() <App num=200/> 相当于 new App(200)
2.遇到以{开头的代码会按照JavaScript语法解析
- js代码包含在{}中
(三) 使用
可以将React JSX 代码可以放在一个独立文件上,并在不同的js文件中引入即可
App.js文件中:
//定义导出的标签
let App =(<div>
<h1>标题</h1>
<p>hahaha</p>
</div>);
export default App; //将自定义的DOM元素暴露出来,供给其他的页面使用
index.js文件中:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(
App,
document.getElementById('root')
);
给根元素内部渲染组件模板的三种写法:
//1. let App=<div>666</div>
//2.函数组件 function App(){
// let a="hello"
// return <div>666{a+"world"}</div>
// }
//3.导入对象组件: import App from "./App"
root.render(<App/>); //给根元素内部渲染组件模板
(四) 样式
- React 推荐使用内联样式
App.css文件:
.adiv{
color: pink;
}
App.jsx文件:
import React from "react";
import "./App.css" //全局css样式
class App extends React.Component {
constructor(arg) {
super(arg)
}
render() {
let box = "adiv"
let bdiv = {
color: "lightblue"
}
return (
<div>
<div className={box}>123</div>
<div style={bdiv}>456</div>
</div>
)
}
}
export default App;
显示结果:
(五) 注释
注释需要写在花括号中,需要注意的是:
-
在标签内部的注释需要花括号
-
在标签外的的注释不能使用花括号
ReactDOM.render(
/*标签外部的注释 */
<h1>我是标题 {/*标签内部的注释*/}</h1>,
document.getElementById('root')
);
(六) JavaScript 表达式
- 我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
let a=20
function fn(){return "hello"}
ReactDOM.render(
<div>
<h1>{a+1}</h1>
<h3>{fn()}</h3>
</div>,
document.getElementById('root')
);
(七)条件渲染
1. 三目运算符
- 在 JSX 内部不能使用 if else 语句,可以使用 三元运算 表达式来替代。
import React from "react";
class App extends React.Component {
constructor(arg) {
super(arg)
}
render() {
let flag = false
let a = "hi"
let b = <h1>hi</h1>
return (
<div>
{/* 三目运算符代替if-else */}
<div>{flag ? a : b}</div>
</div>
)
}
}
export default App;
显示结果:
2. 可以在JSX外部使用if语句
var i = 10;
if(i > 0){ //使用if语句的好处是:如果条件不满足且不需要渲染组件时不需要写else
box = <div className="box"></div>;
}
ReactDOM.render(
<div>
{ box }
</div>,
document.getElementById('root')
);
(八)数组&列表渲染
- JSX 允许在模板中插入数组,数组会自动展开所有成员
- 通过数组的map函数
import React from "react";
class App extends React.Component {
constructor(arg) {
super(arg)
}
render() {
let arr = ["a", "b", "c", <div>这是div标签</div>, "换行了"]
let arr2 = ["hello", "react"]
let arr3 = [{ id: 1, name: "haha" }, { id: 2, name: "xixi" }]
return (
<div>
{/* 把元素从数组arr中取出来显示在div中 不需要for循环了 */}
<div>{arr}</div>
{/* 可以在渲染标签的时候写逻辑 */}
<div>{arr2.map(el => <h3>{el}</h3>)}</div>
<div>{arr3.map(el => <div><h2>{el.id}</h2><p>{el.name}</p></div>)}</div>
</div>
)
}
}
export default App;
显示结果:
面试题:为什么render函数返回的模板用()括起来?
答:因为js语法中return换行的话 认为是没有返回值的
三、组件
React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件。
我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component(类定义)。一个组件类必须要实现一个 render 方法,这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是,必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的。
1、定义单个组件
(1)定义组件
-
方式1:通过React自定义组件(DOM元素):类定义
import React, { Component } from 'react'
export class Box extends Component {
render() {
return (
<div>
<h2>类组件--Box</h2>
</div>
)
}
}
export default Box
-
方式2:通过React自定义组件(DOM元素):函数定义
//普通函数
export default function Box2() {
return (
<div>
<div>
<h2>静态组件Box2--纯粹的静态模板</h2>
函数组件,无状态组件 pure
</div>
</div>
)
}
//箭头函数
import React from 'react'
let Box3=()=>{return <div>Box3</div>}
export default Box3
(2) 使用组件
import React from "react";
import Box from "./Box";
import Box2 from './Box2'
import Box3 from './Box3'
class App extends React.Component {
constructor(arg) {
super(arg)
}
render() {
return (
<div>
<Box></Box>
<Box2></Box2>
<Box3></Box3>
</div>
)
}
}
export default App;
2、定义复合组件
可以通过创建多个组件来合成一个组件,即把组件的不同功能点进行分离--组件嵌套
import React from 'react';
import ReactDOM from 'react-dom';
class WebSite extends React.Component {
render() {
return (
<div>
<Name name={this.props.name} />
<Link site={this.props.site} />
</div>
);
}
}
//局部组件Name
class Name extends React.Component {
render() {
return (
<h1>{this.props.name}</h1>
);
}
}
//局部组件Link
class Link extends React.Component {
render() {
return (
<h1>{this.props.site}</h1>
);
}
}
ReactDOM.render(
<WebSite name="百度一下,你就知道" site='http://www.baidu.com' />,
document.getElementById('root')
)
四、传值 React Props
React 的一大特点是单向数据流。
React 中的每一个组件,都包含有一个属性(props),属性主要是从父组件传递给子组件的,在组件内部,可以通过this.props获取属性对象。
1、定义和使用props 传值
1)通过React类定义组件时:
-
在父组件render 方法中调用组件时使用key=value 的形式来指定属性。
ReactDOM.render(
<MyApp name="哈哈哈" />,
document.getElementById('root')
);
- 在自定义子组件中通过this.props.key 来获得组件属性的值,需要使用{}括起来。
// 类定义组件时,使用属性 this.props.属性名称
class MyApp extends React.Component {
render() {
return (<p>{this.props.name}</p>);
}
}
2)通过React函数定义 组件时:
-
在父组件render 方法中调用组件时使用key/value 的形式来指定属性。
ReactDOM.render(
<Myfun title="哈哈哈" />,
document.getElementById('root')
);
-
在自定义子组件中通过函数接收参数props,props.key来获得组件属性的值,需要使用{}括起来
// 函数定义组件时,在组件内部使用属性值:props.属性名称
function Myfun(props) { // 函数需要传递一个参数props
return(<h2>{props.title}</h2>)
}
2、默认Props
-
定义默认props:
父组件:
//由于是用ES6 class语法创建组件,其内部只允许定义方法,而不能定义属性,class的属性只能定义在class之外。所以defaultProps要写在组件外部。
App.defaultProps = {
name: '哈哈哈'
};
ReactDOM.render(
<App />,
document.getElementById('root')
);
子组件:
class App extends React.Component {
render() {
return <p>my name is {this.props.name}</p>
}
}
3、多属性传值
(1)定义一个this.props对象,在对象中声明多个键值对,用于表示组件的属性
(2)在组件中使用{...this.props}的方式传递属性。“...”表示JSX的延展操作符,这种方式可以很方便的为组件指定多个属性,并且为属性的值指定数据类型。
父组件:
let p1 = {
name: '哈哈哈',
age: 21,
sex: '女'
};
ReactDOM.render(
//<MyApp name='哈哈哈' age='21' sex='女' />
<MyApp {...p1}/>,
document.getElementById('root')
);
子组件:
class MyApp extends React.Component {
render() {
return(
<h1>{this.props.name} : {this.props.age} : {this.props.sex}</h1>
);
}
}
五、状态 React State
1、定义State
React在ES6的实现中,规定state在constructor中实现
正确定义State的方式如下:
(1)在constructor中实现state
(2)在constructor中通过bind绑定事件函数(事件函数是用来改变状态)
(3)在事件函数内部使用setState函数更改状态
(4)在组件中的render函数中使用该状态
(5)在组件上需要设置监听事件,去触发事件函数的执行
//定义组件
class LikeButton extends React.Component {
//constructor表示构造器,在constructor需要声明状态state,在声明state之前需要使用super(props);
constructor(props) {
super(props);//使用父类的属性
//声明状态
this.state = {
liked: false
}
//Currently, you are calling bind.
//But bind returns a bound function.
//You need to set the function to its bound value.
//目前,你正在调用绑定。但是绑定返回绑定函数。您需要将函数设置为其绑定值。
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({liked: !this.state.liked});
}
render() {
return (
<button onClick={this.handleClick}>
你<strong>{this.state.liked ? '喜欢' : '不喜欢'}</strong>我,点我切换
</button>
)
}
}
ReactDOM.render(
<LikeButton />,
document.getElementById('root')
)
2、setState设置状态
(1)语法:
setState(object nextState[, function callback])
(2)说明:
-
setState是React事件处理函数中和回调函数中触发UI更新的主要方法。
-
不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。
-
setState()不一定是同步的,为了性能提升,React会批量执行state和DOM渲染。
-
setState()总是会触发一次组件重绘,但可在shouldComponentUpdate()中实现一些条件渲染逻辑来解决。
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
clickCount: 0
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({clickCount: this.state.clickCount + 1});
}
render() {
return (
<h2 onClick={this.handleClick}>
点击后次数变更: {this.state.clickCount}
</h2>
);
}
}
ReactDOM.render(
<MyApp />,
document.getElementById('root')
);
同步设置多个状态时(不常用),可以在setState函数的第二个参数可以传递一个function回调函数,如下:
class MyApp extends React.Component {
constructor(props) {
super(props);
this.state = {
clickCount: 0,
isRed: false,
smallFont: true
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState(
{clickCount: this.state.clickCount + 1},
function() {
this.setState(
{isRed: !this.state.isRed},
function() {
this.setState({smallFont: !this.state.smallFont});
}
);
}
);
console.log(this.state.isred);
}
render() {
var redStyle = {color: 'red', fontSize: 50};
var blueStyle = {color: 'blue', fontSize: 14};
return (
<h2 onClick={this.handleClick} style={this.state.isRed ? redStyle : blueStyle}>
点击后次数变更: {this.state.clickCount}
</h2>
);
}
}
ReactDOM.render(
<MyApp />,
document.getElementById('root')
);
状态上移:当存在多个组件共同依赖一个状态,或是当子组件的props 数据需要被修改时,将这个状态放到对应组件的父组件中:
子组件:
class Site extends React.Component {
render() {
return (
<div>
<button onClick={this.props.updateState}>点击改变</button>
<h2>{this.props.myData}</h2>
</div>
);
}
}
父组件:
class Content extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'hello'
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: '你好'});
}
render() {
return(
<div>
<Site myData={this.state.value} updateState={this.handleChange}/>
</div>
);
}
}
3、State 与 Props 区别
除了State, 组件的Props也是和组件的UI有关的。他们之间的主要区别是:
-
props 中的数据都是外界传递过来的
-
state 中的数据都是组件私有的;(通过Ajax 获取回来的数据,一般都是私有数据)
-
props 中的数据都是只读的,不能重新赋值
-
state 中的数据都是可读可写的
-
State定义在constructor内部,在super(props)代码后面;Props默认值定义在类(组件)的外部
当子组件的属性值是可变值时,采用状态上移:
状态上移通过属性将父组件的状态传递到子组件,那么父组件的状态发生变化时,子组件的属性也会改变
4、state/props 实现父子组件通信
-
子组件获取父组件整个组件进行传参
-
父组件在调用子组件时,传入一整个组件给子组件<Children parent={ this } />
-
父组件中定义一个方法getChildrenMsg(resulet, msg),用来获取子组件传来的值以及执行其他操作
-
子组件在通过this.props来获取到一整个组件this.props.parent 或者this.props[parent]
-
子组件调用父组件步骤2里定义的方法进行传值this.props.parent.getChildrenMsg(this,val)
-
Parent:
import Children from './Children'
export default class Parent extends Component {
constructor(props) {
super(props)
this.state = {
msg: '父组件传值给子组件',
childrenMsg: ''
}
}
getChildrenMsg = (result, msg) => {
// console.log(result, msg)
this.setState({
childrenMsg: msg
})
}
render() {
return (
<div>
<h2>我是父组件 </h2>
<h3>子组件传来的值为:{ this.state.childrenMsg }</h3>
<hr/>
<Children parent={ this } />
{/*<Children parent={ this.getChildrenMsg.bind(this) } />*/}
</div>
)
}
}
Children:
export default class Children extends Component {
constructor(props) {
super(props)
this.state = {
msg: '子组件传值给父组件'
}
}
toParent = () => {
// console.log(this.props.parent.getChildrenMsg.bind(this, this.state.msg))
this.props.parent.getChildrenMsg(this, this.state.msg)
}
render() {
return (
<div>
<h2>{ 我是子组件 }</h2>
<button onClick={ this.toParent }>子组件传入给父组件</button>
</div>
)
}
}