React学习路线
1、什么是React?
- React 是一个用于构建用户界面的 JAVASCRIPT 库。
- React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
- React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
- React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。
2、React 特点:
1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
3、React 组件:
我们可以使用函数定义了一个组件:
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
也可以使用 ES6 class 来定义一个组件:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
4、React 三大属性:
4.1.1、props属性
react中说的单向数据流值说的就是props,根据这一特点它还有一个作用:组件之间的通信。props本身是不可变的,但是有一种情形它貌似可变,即是将父组件的state作为子组件的props,当父组件的state改变,子组件的props也跟着改变,其实它仍旧遵循了这一定律:props是不可更改的。
4.1.2、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'));
5、React 路由:
5.1、安装react-router-dom
在项目命令行中,执行
cnpm install react-router-dom -S
下载到生产环境的依赖中。
在组件中通过对象的解构方式去获取到react-router-dom内置组件,在组件中,按需引入内置组件,在页面中进行使用:
- HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
- Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
- Link表示一个路由的链接
import {HashRouter,Route,Link} from ‘react-router-dom’
代码示例:
render(){
return (
<HashRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
<Link to="/home">首页</Link>
<Link to="/movie/">电影</Link>
<Link to="/about">关于</Link>
<hr />
<Route path="/home" component={Home} ></Route><hr/>
<Route path="/movie" component={Movie} exact></Route><hr/>
<Route path="/about" component={About}></Route><hr/>
</div>
</HashRouter>
);
}
当使用HashRouter把APP根组件的元素包裹起来之后,网站就已经启用路由了,在一个HashRouter中,只能有唯一的一个根元素。 在一个网站中,只需要使用唯一的一次就行了。
Route创建的标签,就是路由规则,其中path表示要匹配的路由,component表示要展示的组件。Route具有两种身份:1.它是一个路由匹配规则;2.它是一个占位符,表示将来匹配到的组件都放到这个位置
需要注意的地方
- Route 组件path地址是以/开头 ,配置component属性,是显示的组件,这个属性不可以大写
- Route组件可以单双标签使用,单标签需要/结尾,双标签不可以在中间写入别的东西
- Link to属性的地址也是/开头,Link在页面渲染的是a标签
6、React UI:
6.1、React Material-UI介绍
React 组件用于更快速、更简便的 web 开发。你也可以建立你自己的设计系统,或者从 Material Design 开始。
Material-UI 是一个使用 MIT 许可证的开源项目。 可能完全因为这些超棒的 backers,这个项目不断的在开发
6.2、React-Bootstrap介绍
React-Bootstrap是可重用的前端组件库。 样式组件依赖于bootstrap。与 Twitter Bootstrap 一致外观与感受,但通过 Facebook 的 React.js 框架获得更清爽的代码
6.3、ant-design介绍
Ant Design 蚂蚁框架 (蚂蚁设计)
antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品
特点:开箱即用的高质量 React 组件。
7、Redux:
7.1、概念:
redux对组件的数据做统一管理,方法多组件开发时实现传值问题
7.2、实现步骤
7.2.1、安装Redux
npm install redux
7.2.2、引入相关组件
1、 action 把组件的值传递 给store dispatch(参数)
2、store const store = createStore(reducer)
方法 dispatch() 向reducer传递action参数
subscribe() 监听store中数据的改变
getState() 获取当前store对象中state的值
3、reducer (state,action)=>{ return state }