1、React起步
1.1、React简介
React起源于Facebook的内部项目,因为该公司对市场上所有JavaScript MVC框架都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,于是就在2013年5月开源了。
1.2、使用React脚手架安装
1.cnpm install -g create-react-app
2.更换源 npm config set registry https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
npm config get registry
-- 显示出上述地址的话就是更换成功
复制代码
3.创建todolist create-react-app todolist
4.进入目录 cd todolist
5.启动项目 npm start
1.3、脚手架代码精简
项目目录说明:
node_modules
===>npm
下载的相关依赖package.json
===> node包文件 包括项目的一些介绍 以及 相关文件版本
public
文件夹:
index.html
===> 项目的首页
favico.ico
===> 项目图标
mainfest.json
===> 定义网页快捷方式
src
文件夹:
index.js
===> 整个项目的入口文件 registerServiceWorker.js
===> 离线缓存
代码工程精简
在 src
目录下仅保存 App.js
和 index.js
文件
index.js
是入口文件,精简代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
复制代码
App.js
文件精简代码如下:
import React from 'react';
function App() {
return (
<div>
hello React...
</div>
);
}
export default App;
复制代码
2、React基础语法
2.1、 JSX
语法基础
React
使用 JSX
来替代常规的JavaScript
。
JSX
是按照 XML
语法规范 的 JavaScript
语法扩展。
JSX
有以下优点:
JSX
执行更快,因为它在编译为 JavaScript 代码后进行了优化;- 它是类型安全的,在编译过程中就能发现错误;
- 使用
JSX
编写模板更加简单快速。
**JSX
语法的本质:**并不是直接把 JSX
渲染到页面上,而是内部先转换成了 createElement
形式,再渲染的。
**JSX
注释:**推荐使用 {/* 这是注释 */}
;
**JSX
中添加class类名:**需要使用 className
来替代 class
;htmlFor
替代 label
的 for
属性;
在JSX
创建DOM的时候,所有节点必须有唯一的根元素进行包裹;
在JSX
语法中,标签必须成对出现,如果是单标签,则必须自闭和;
代码示例:
const mydiv = <div>这是一个Div标签</div>;
ReactDOM.render(mydiv, document.getElementById('root'));
复制代码
使用组件化开发代码示例:
App.js
组件文件代码
import React from 'react';
class App extends React.Component{
render(){
return (
<div>
{1+1}
<hr/>
Hello,Reactjs!!
</div>
);
}
}
export default App;
复制代码
在其他文件中使用 JSX
语法引用组件:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
复制代码
2.2、JSX语法应用
渲染数字
import React from 'react';
import ReactDOM from 'react-dom';
let a = 10;
ReactDOM.render(
<div>{a}</div>
, document.getElementById('root'));
复制代码
渲染字符串
import React from 'react';
import ReactDOM from 'react-dom';
let str = 'hello react';
ReactDOM.render(
<div>{str}</div>
, document.getElementById('root'));
复制代码
渲染布尔类型
import React from 'react';
import ReactDOM from 'react-dom';
let rel = true;
ReactDOM.render(
<div>{rel ? '结果为真' : '结果为假'}</div>
, document.getElementById('root'));
复制代码
渲染属性值
import React from 'react';
import ReactDOM from 'react-dom';
let title = "this is a div";
ReactDOM.render(
<div title={title}>Hello React</div>
, document.getElementById('root'));
复制代码
渲染标签对象
import React from 'react';
import ReactDOM from 'react-dom';
const h1 = <h1>Hello React!</h1>;
ReactDOM.render(
<div>
{h1}
</div>
, document.getElementById('root'));
复制代码
渲染数组
import React from 'react';
import ReactDOM from 'react-dom';
const arr = [
<h1>第1行</h1>,
<h2>第2行</h2>,
];
ReactDOM.render(
<div>
{arr}
</div>
, document.getElementById('root'));
复制代码
将普通数组转为 JSX
数组,并渲染到页面中
解决 Warning: Each child in a list should have a unique "key" prop.
方法一:
import React from 'react';
import ReactDOM from 'react-dom';
//原数组
const arr = ['html','css','vue'];
//新数组
const newArr = [];
//forEach()方法没有返回值
arr.forEach((item,index) => {
const temp = <h2 key={index}>{item}</h2>
newArr.push(temp);
});
ReactDOM.render(
<div>
{newArr}
</div>
, document.getElementById('root'));
复制代码
方法二:
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import './style.css';
//原数组
const arr = ['html','css','vue'];
ReactDOM.render(
<div>
{/* map()方法有返回值 */}
{arr.map((item,index) => {
return <h2 key={index}>{item}</h2>
})}
</div>
, document.getElementById('root'));
复制代码
3、React组件
3.1、组件的概念
React 应用都是构建在组件之上。
组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石。在React的组件构成中,按照状态来分可以分为有状态组件和无状态组件。
3.2、组件的特点
组件化的概念在后端早已存在多年,只不过近几年随着前端的发展,这个概念在前端开始被频繁提及,特别是在MV*的框架中。
前端中的“组件化”这个词,在UI这一层通常指“标签化”,也就是把大块的业务界面,拆分成若干小块,然后进行组装。
狭义的组件化一般是指标签化,也就是以自定义标签(自定义属性)为核心的机制。
广义的组件化包括对数据逻辑层业务梳理,形成不同层级的能力封装。
-
标准性
任何一个组件都应该遵守一套标准,可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
-
组合性
组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合,而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示,肯定是要依赖不同组件之间的组合,嵌套以及通信。
-
重用性
任何一个组件应该都是一个可以独立的个体,可以使其应用在不同的场景中。
-
可维护性
任何一个组件应该都具有一套自己的完整的稳定的功能,仅包含自身的,与其它组件无关的逻辑,使其更加的容易理解,使其更加的容易理解,同时大大减少发生bug的几率。
3.3、自定义组件
函数组件
无状态函数式组件形式上表现为一个只带有一个 render()
方法的组件类,通过函数形式或者 ES6
箭头 function
的形式在创建,并且该组件是无state状态的。具体的创建形式如下
import React from 'react';
//定义一个React组件
function App() {
return (
<div>
hello React...
</div>
);
}
export default App;
复制代码
class组件
React.Component
是以 ES6
的形式来创建react的组件的,是React目前极为推荐的创建有状态组件的方式,形式改为 React.Component
形式如下
import React from 'react';
//定义一个React组件
class App extends React.Component{
render(){
return (
<div>
Hello,Reactjs!!
</div>
);
}
}
export default App;
复制代码
在其他文件中引用组件
import React from 'react';
import ReactDOM from 'react-dom';
//App组件,组件要求大写字母开头
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
复制代码
函数组件和class组件的区别
用构造函数创建出来的组件,叫做“无状态组件”;
用class关键字创建出来的组件,叫做“有状态组件”;
有状态组件和无状态组件之间的本质区别是有无state属性。
注意:
使用
class
关键字创建的组件,有自己的私有数据(this.state)和生命周期函数;使用
function
创建的组件,只有props
,没有自己的私有数据和生命周期函数;
函数组件和类组件当然是有区别的,而且函数组件的性能比类组件的性能要高,因为类组件使用的时候要实例化,而函数组件直接执行函数取返回结果即可。为了提高性能,尽量使用函数组件
区别 | 函数组件 | class组件 |
---|---|---|
是否有 this |
没有 | 有 |
是否有生命周期 | 没有 | 有 |
是否有状态 state |
没有 | 有 |
4、React核心属性
4.1、props
属性
react中说的单向数据流值说的就是props,根据这一特点它还有一个作用:组件之间的通信。props本身是不可变的,但是有一种情形它貌似可变,即是将父组件的state作为子组件的props,当父组件的state改变,子组件的props也跟着改变,其实它仍旧遵循了这一定律:props是不可更改的。
props
属性的特点:
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
3.内部读取某个属性值:this.props.propertyName
4.作用:通过标签属性从组件外 向组件内传递数据(只读 read only)
5.对props中的属性值进行类型限制和必要性限制
代码示例
使用函数组件:
import React from 'react';
import ReactDOM from 'react-dom';
//使用函数组件
function User(props){
//在组件中获取props属性值
return <div>{props.name},{props.age}</div>
}
//定义数据
const person ={
name:'张三',
age:20,
sex:'男'
}
ReactDOM.render(
<User {...person}></User>
, document.getElementById('root'));
复制代码
使用类组件:
import React from 'react';
import ReactDOM from 'react-dom';
//使用class组件
class User extends React.Component{
render(){
return (
<div>{this.props.name}--{this.props.age}</div>
);
}
}
//数据
const person ={
name:'张三',
age:20,
sex:'男'
}
ReactDOM.render(
<User {...person}></User>
, document.getElementById('root'));
复制代码
4.2、state
属性
React 把组件看成是一个状态机(State Machines)。通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)。
代码示例:
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
//构造方法
constructor(){
super();
this.state = {
name: 'tom'
}
}
render(){
//state属性是可修改的
this.state.name = 'jack';
return (
<h1>{this.state.name}</h1>
);
}
}
ReactDOM.render(<Person />, document.getElementById('root'));
复制代码
设置状态:setState
setState(object nextState[, function callback])
不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑
4.3、props
和state
属性的区别
props
中的数据都是外界传递过来的;state
中的数据都是组件私有的;(通过Ajax获取回来的数据,一般都是私有数据)props
中的数据都是只读的,不能重新赋值;state
中的数据,都是可读可写的;- 子组件只能通过
props
传递数据;
4.4、refs
属性
在React数据流中,父子组件唯一的交流方式是通过props属性;如果要修改子组件,通过修改父组件的属性,更新达到子组件props属性的值,重新渲染组件以达到视图的更新。但是,有些场景需要获取某一个真实的DOM元素来交互,比如文本框的聚焦、触发强制动画等
- 给DOM元素添加ref属性
- 给类组件添加ref属性
代码示例:
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component{
constructor(){
super();
this.handleClick = this.handleClick.bind(this);
}
//点击事件
handleClick(){
// 使用原生的 DOM API 获取焦点
this.refs.myInput.focus();
}
render(){
return (
<div>
<input type="text" ref="myInput" />
<input
type="button"
value="点我输入框获取焦点"
onClick={this.handleClick}/>
</div>
);
}
}
ReactDOM.render(<Person />, document.getElementById('root'));
复制代码