React基础 - 《JavaScript》

1、React特点
2、React简介
3、传统DOM与虚拟DOM
- 3.1 传统DOM
- 3.2 虚拟DOM
4、函数式编程
- 4.1 介绍
- 4.2 好处
5、搭建React环境
6、JSX基本语法
7、组件的声明
- 7.1 es5
- 7.2 es6
8、属性
- 8.1 组件接收属性值的传递：this.props.属性名
- 8.2 限制属性值的类型
9、状态state
10、事件绑定
11、子组件向父组件传递数据
12、React生命周期
13、React动画
14、路由
- 14.1 什么是路由
- 14.2 React-router

1、React特点

- 声明式的设计,可以轻松描述应用
- 高效,通过虚拟DOM,最大限度的减少了与DOM的交互
- 灵活,可以与很多库和框架很好的融合
- JSX,是Js语法的扩展
- 组件,使用其构建组件,能使代码更好的复用
- 单向响应的数据流,减少重复代码

2、React简介

- 专注视图层：其并不是完整的MVC/MVVM框架,它专注于提供清晰的view层

3、传统DOM与虚拟DOM

3.1 传统DOM

- 真实页面对应一个DOM树,每次更新页面时,都要手动操作DOM

3.2 虚拟DOM

- 把真实DOM树转换成JavaScript对象树进行渲染

4、函数式编程

4.1 介绍

- 属于结构化编程的一种,主要思想就是把运算过程尽量写成一系列的函数调用

4.2 好处

- 代码简洁,开发迅速
- 接近自然语言,便于理解
- 更方便的代码管理
- 易于并发编程
- 代码的热升级

5、搭建React环境

- 安装官方脚手架
    cnpm i create-react-app -g
- 创建工程
    create-react-app my-app
- 进入工程目录
    cd my-app
- 启动工程
    npm start

6、JSX基本语法

6.1 介绍

JSX将HTML语法直接加入到JavaScript代码中,再通过编译器转换到纯JavaScript代码后由浏览器执行;在实际开发中,不会产生任何副作用,反而会让代码更加容易维护
编译过程是由babel的jsx编译器实现

6.2 xml基本语法

只允许被一个标签包裹
const list = () =>(
    <div>
        <p></p>
        <ul>
            <li></li>
        </ul>
    </div> 
);

6.3 元素类型

小写字母被认为是DOM
大写字母对应组件
注释使用JS注释语法

6.4 元素属性

class属性改为className
for属性改为htmlFor
Boolean属性：省略Boolean值会导致JSX认为Boolean值都为true

6.5 JavaScript属性表达式

属性值要使用表达式,只要用{}替换""即可
例如：<input type="text" value={val?val:''} />

6.6 HTML转义

React会将所有要显示到DOM的字符串转义,放置XSS,
后台传过来的带标签的数据是不能直接进行转义的,需要使用：
    dangerouslySetInnerHTML={{_html:xxx}}

6.7 ReactDOM.render()

作用：描绘DOM
参数1：DOM对象
参数2：注入点

ReactDOM.render(
    <div>Hello World!</div>,
    document.getElementById("box")
);

7、组件的声明

7.1 es5

var Hello = React.createClass({
    render:function(){
        return (
            <div>Hello World!</div>
        )
    }
});

7.2 es6

class Hello extends React.Component{
    render(){
        return (
            <div>Hello World!</div>
        )
    }
}
ReactDOM.render(
    <Hello/>,
    document.getElementById("box")
);

8、属性

8.1 组件接收属性值的传递：this.props.属性名

例如：
<Header title='123' />
var Header = React.createClass({
    render:function(){
        return (
            <h2>{this.props.title}</h2>
        )
    }
});

8.2 限制属性值的类型

propTypes
例如：
<Header title='留言' />
Header.propTypes={
    title:React.PropTypes.string
}
【注意】：在1.15.0之后统一使用prop-types进行管理

9、状态state

9.1 介绍

React把组件看做是一个状态机,通过与用户的交互实现不同的状态,然后渲染UI,让用户界面和数据保持一致;在React中只需要改变新组件的state,然后根据新的state重新渲染用户界面(不需要操作DOM)

9.2 重要方法

getInitialState：定义初始状态(ES6中不再使用,而改在constructor中设定)
this.state：读取状态
this.setState：更新组件的状态

9.3 ES6中state的初始化

constructor(props){
    super(props);//代表执行父类的构造器
    this.state={
        list:[],
        title:""
    };
}

10、事件绑定

10.1 写法

必须写成驼峰的形式,例如：onClick,即事件的首字母要大写

10.2 得到元素

得到在浏览器上显示的元素：refs

解决this指向

.bind(this)

11、子组件向父组件传递数据

- 在父组件中定义一个设置state的方法,然后把这个方法通过属性传递给子组件
- 在子组件调用这个方法,把值传入就可以了

12、React生命周期

生命周期整体流程
    实例化
        getDefaultProps     取得默认属性(ES6中被删除)
        getInitialState     初始化状态(ES6中被删除)
        componentWillMount  即将进入DOM
        Render              组件渲染
        componentDidMount   已经进入DOM
    存在期(参照数据更新过程)
        触发时机：this.setState()更新状态
        componentWillReceiveProps  父组件发生render的时候子组件就会调用
        shouldComponentUpdate      判断是否需要重新渲染组件
        componentWillUpdate        组件即将重新渲染
        Render                     组件渲染
        componentDidUpdate         组件重新渲染完成
    销毁时
        componentWillunmount

13、React动画

ReactCSSTransitionGroup：React官方提供的动画解决方案
官方文档：https://facebook.github.io/react/docs/animation.html
使用方法：
1、引入组件
    import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
2、使用引入的ReactCSSTransitionGroup来包裹动画标签
    <ReactCSSTransitionGroup transitionName='example' transitionEnterTimeout={500} transitionLeaveTimeout={300}>
        {items}
    </ReactCSSTransitionGroup>
【注意】：生成items的时候,里面每一个元素必须包含key属性,因为React要判断哪个元素进入,停留和移除
3、写动画用的css
    .example-enter 进入动画的起点
    .example-enter-active 进入动画的终点
    .example-leave 离开动画的起点
    .example-leave-active 离开动画的终点

14、路由

14.1 什么是路由

路由是根据不同的url地址展示不同的内容或者页面

14.2 React-router

一个针对React而设计的路由解决方案,可以友好的解决组件到url之间的同步映射关系
- 安装
    cnpm i react-router-dom --save-dev
- 引入必要的组件
    import {
        BrowserRouter as Router,
        Route,
        Link
    } from 'react-router-dom';
- 定义路由
    <Router>
        <Route exact path="/" component={Home}></Route>
        <Route  path="/news" component={News}></Route>
        <Route  path="/other" component={Other}></Route>
    </Router>
- Link
    - 普通链接
        <Link to="/"></Link>
    - 带链接的参数
        <Link to={{
            pathname:"/course",//路径
            search:'?sort=xxx',//get传参
            hash:'#xxx',//hash值
            state:{fromDashboard:true}//需要传递的状态值
        }}></Link>
- NavLink链接
    重要属性：
        activeClassName - 激活状态时的class
        activeStyle - 激活状态状态时的style
        exact - 是否精确匹配路径
        isActive - 参数为function,用来判断是否需要把链接设为active状态
- 动态路由传参
    <Route path="/detail/:paramName" component={Detail}></Route>
    组件参数接收：
        this.props.match.params.paramName
- 动态路由传参-正则表达式
    (1)?代表参数可选
        <Route path="/detail/:id?" component={Detail}></Route>
        以下两种条件都符合跳转条件
        - /detail
        - /detail/10086
    (2)路径匹配规则 - 使用正则表达式进行参数类型限制
        例如：限制id只能是数字
        <Route path="/detail/:id(\d+)" component={Detail}></Route>
        路径匹配结果：
        /detail/10086 ---------- success
        /detail/abc ------------ error
- 重定向
    Redirect标签
        from属性里面是匹配规则,当匹配的时候跳转到to中的路径;
        当需要使用from属性的时候,外面要配合Switch标签使用
    例如：
        <Switch>
            <Route exact path="/" component={Home}></Route>
            <Route exact path="/discover" component={Discover}></Route>
            <Redirect from="/*" to="/"></Redirect>
        </Switch>