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>&nbsp;&nbsp;
                        <Link to="/movie/">电影</Link>&nbsp;&nbsp;
                        <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 }

yiyiyiyi_

发布了7 篇原创文章 · 获赞 11 · 访问量 443

私信关注