react学习笔记一：入门级小白到脚手架（create-react-app）开发项目-阿里云开发者社区

前言

公司实习的地方，使用react，然后打算学习一下react，并把基础知识点整理一下，毕业设计的前端，也使用react来搭建前端框架。
这里主要有如下react基础知识点：

jsx语法
组件定义的两种方式：类和方法
组件三大属性：state、props、ref（这个为标签属性）
组件的组合
标签的受控组件和非受控组件
react的生命周期
react应用（基于create-react-app脚手架）
react-axios
react-router
react-UI：antdesign
最重要的一个没讲：redux
代码都已上库到GitHub上。
传送门： https://github.com/fengfanli/react-study

一、helloworld

先使用react写一个helloworld，体验一下。
先导入react开发版本js,有三个，react.development.js、react-dom.development.js、babel.min.js
react.js：React 的核心库
react-dom.js：提供操作DOM 的react 扩展库
babel.js：为babel库，两个作用1、将es6语法转化为es5,2、解析JSX语法代码为纯JS 语法代码的库（这里使用的是后者语法）

<body>
    <div id="example"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">  // 声明：告诉babel.js这里有jsx语法
        // 1、创建虚拟DOM元素对象
        var vDom = <h1>Hello React</h1>    // 不是字符串  jsx 语法
        // 2、将虚拟DOM渲染到页面真实DOM容器中
        ReactDOM.render(vDom, document.getElementById("example"))
    </script>
</body>

页面：
在这里插入图片描述
步骤（重点学习的地方）：
在< script type=“text/babel”> 中编写：声明：告诉babel.js这里有jsx语法
2. 创建虚拟DOM元素对象：就是定义一个变量，将HTML标签赋值于变量
3. 将虚拟DOM渲染到页面真实DOM容器中

技术点：

jsx语法：var vDom = <h1>Hello React</h1>
渲染语法：ReactDOM.render(vDom, document.getElementById("example"))

二、React jsx

2.1 jsx

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: XML+JS
作用: 用来创建react虚拟DOM(元素)对象
a. var ele = < h1>Hello JSX!< /h1>
b. 注意1: 它不是字符串, 也不是HTML/XML标签
c. 注意2: 它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
a. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
b. 遇到以 { 开头的代码，以JS语法解析: 标签中的js代码必须用{ }包含
babel.js的作用
a. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
b. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

2.2 动态展示列表数据

功能： 在页面中遍历一个数组，将其显示在页面中。
问题： 如何将一个数据的数组转换为一个标签的数组很常用，使用数组的map() 方法和箭头函数

    <div id="example1"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        /**
        * 功能：动态展示列表数据
        * 问题：如何将一个数据的数组 转换为 一个标签的数组   很常用
        *      使用数组的map() 方法 和 箭头函数
        * */
        const names = ['jQuery', 'zepto', 'angular', 'react', 'vue']
        // 1、创建虚拟DOM
        // li 标签一定要带 key属性，而且还不能一样 否则警告
        const ul = (
            <ul>
                {names.map(name=> <li key={name}>{name}</li>)}
            </ul>
        )
        // 2、渲染虚拟DOM
        ReactDOM.render(ul, document.getElementById('example'))
    </script>

页面：
在这里插入图片描述
步骤：

创建虚拟DOM
使用 {} 大括号写法，在里面写js语法，将数组遍历。
渲染虚拟DOM(固定形式写法，将定义好的jsx虚拟dom渲染到真实dom上)

技术点：
3. {} 大括号写法：
4. 数组方法map()：js方法，是对数组的遍历，里面为回调函数，方法形式：
map(value):value 为数组的值，
map(value, index):value 为数组的值，index为数组下标

2.3 虚拟dom创建的两种方式

使用原生js方法：const vDom1 = React.createElement(‘h1’, {id:‘myTitle’},‘hello’)
使用jsx方法：const vDom2 = < h3 id={myId.toUpperCase()}>{msg.toLowerCase()}< /h3>

2.4 代码实例

<body>
    <div id="test01"></div>
    <div id="test02"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript">
        /**
         * 需求，两种方式实现虚拟DOM的创建
         * 1、使用原生js方法：const vDom1 = React.createElement('h1', {id:'myTitle'},'hello')
         * 2、使用jsx方法：const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
         */
        const msg = 'I Like you!'
        const myId = 'fengfanli'
        // 1、创建虚拟DOM元素对象
        // const element = React.createElement('h1', {id:'myTitle'},'hello')
        const vDom1 = React.createElement('h2', {id: myId.toLowerCase()}, msg.toUpperCase())
        // debugger
        // 2、将虚拟DOM渲染到页面真实DOM容器中
        ReactDOM.render(vDom1, document.getElementById('test01'))
    </script>
    <script type="text/babel">
        // 1、创建虚拟DOM元素对象
        const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
        // debugger
        // 2、将虚拟DOM渲染到页面真实DOM容器中
        ReactDOM.render(vDom2, document.getElementById('test02'))
    </script>
</body>

页面：
在这里插入图片描述

2.5 步骤

创建虚拟dom
渲染虚拟dom

2.6 技术点

渲染虚拟dom的两种方法：原生js和jsx

三、组件化、模块化

3.1 组件

理解: 用来实现特定(局部)功能效果的代码集合(html/css/js)
为什么: 一个界面的功能更复杂
作用: 复用编码, 简化项目编码, 提高运行效率

3.2 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用。
在这里插入图片描述

3.3 模块

理解: 向外提供特定功能的js程序, 一般就是一个js文件
为什么: js代码更多更复杂
作用: 复用js, 简化js的编写, 提高js运行效率

3.4 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

四、组件定义两种方式

方式一：使用方法定义，没有状态用此种方式(简单组件)
方式二：使用类定义，（复杂组件）

4.1 代码实例

<body>
    <div id="example1"></div>
    <div id="example2"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        /**
         * 组件定义的两种方式
         * 1、使用方法定义，没有状态用此种方式(简单组件)
         * 2、使用类定义，（复杂组件）
         */
        // 1.定义组件
        //方式1: 工厂函数组件(简单组件)：没有状态的组件
        function MyComponent() {
            return <h2>工厂函数组件(简单组件)</h2>
        }

        //方式2:  ES6类组件(复杂组件)
        class MyComponent2 extends React.Component{
            render(){
                console.log(this)
                return <h2>工厂函数组件(简单组件)</h2>
            }
        }
        // 2.渲染组件方式
        ReactDOM.render(<MyComponent />, document.getElementById('example1'))
        ReactDOM.render(<MyComponent2 />, document.getElementById('example2'))
    </script>
</body>

页面：
在这里插入图片描述

4.2 技术点

两种定义组件的方式：方法（简单组件）、类（复杂组件）
render()方法，在里面写UI，

五、组件三个属性：state、props、refs

5.1 component_state

5.1.1 需求说明

自定义组件，功能说明如下

显示 h2 标题，初始文本为：你喜欢我
点击标题更新为：我喜欢你

5.1.2 state

state是组件对象最重要的属性, 值是对象(可以包含多个数据)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
初始化状态:

  constructor (props) {
    super(props)
    this.state = {
      stateProp1 : value1,
      stateProp2 : value2
    }
  }

4、读取某个状态值
this.state.statePropertyName // statePropertyName 自定义名称
5、更新状态---->组件界面更新

  this.setState({
    stateProp1 : value1,
    stateProp2 : value2
  })

5.1.2 代码实例

<body>
    <div id="example"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
    /**
    * 需求：自定义组件，功能说明如下
    * 1. 显示 h2 标题，初始文本为：你喜欢我
    * 2. 点击标题更新为：我喜欢你
    * */
    // 1.定义组件
    class Like extends React.Component{
        // 2)、构造器
        constructor(props){
            super(props)
            // 初始化状态
            this.state = {
                isLikeMe: false
            }
            // 将新增方法中的this 强制绑定为组件对象
            this.handleClick = this.handleClick.bind(this)
        }
        // 1)、重写组件类的方法
        render(){
            // 读取状态
            const {isLikeMe} = this.state  // 第二种方式
            return <h2 onClick={this.handleClick}>{isLikeMe?'你喜欢我':'我喜欢你'}</h2>
        }
        // 3)、新添加的方法：内部的 this 默认不是组件对象，而是 undefined， 所以要在 构造器中 绑定方法
        handleClick(){
            console.log('handleClick()',this)
            // 得到原有状态 并取反
            const isLikeMe = !this.state.isLikeMe
            //更新状态
            this.setState({isLikeMe})
        }
    }
    // 2.渲染组件
    ReactDOM.render(<Like />, document.getElementById('example'))
</script>
</body>

5.1.3 步骤

定义组件类。
编写**render（）**方法，在这里写UI组件。
编写构造器，和里面的state属性初始化。
然后在编写点击事件，这里需要注意这个方法需要绑定到类上，在构造器上进行bind（）方法绑定。

5.1.4 步骤、技术点

编写组件类
render方法
constructor构造器、state属性
编写点击事件，在构造器bind绑定,注意更新state的方法和获取state的关键字
渲染组件：ReactDOM.render（）

5.2 component_props

5.2.1 需求说明

需求: 自定义用来显示一个人员信息的组件
1). 姓名必须指定
2). 如果性别没有指定, 默认为男
3). 如果年龄没有指定, 默认为18

5.2.2 props

理解

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

作用

通过标签属性 从组件外向组件内 传递变化的数据
注意: 组件内部不要修改props数据

编码操作

内部读取某个属性值
this.props.propertyName
对props中的属性值进行类型限制和必要性限制

Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}

3、 扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
4、默认属性值

Person.defaultProps = {
name: 'Mary'
}

5、组件类的构造函数

constructor (props) {
super(props)
console.log(props) // 查看所有属性
}

5.2.3 代码实例

<body>
<div id="example1"></div>
<div id="example2"></div>
<div id="example3"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /**
     * props属性 和 prop-types.js    prop-types.js: 对值进行设定
     * 需求：自定义用来显示一个人员信息的组件，效果如页面，说明
     * 1、如果性别没有指定，默认为男
     * 2、如果年龄没有指定，默认为18
     */
    // 1、定义组件
    /**
     * 使用 对象组件
     * 组件对象有三个 state props refs
     **/
    class Person extends React.Component{
        render(){
            console.log(this)
            return(
                <ul>
                    <li>姓名：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.sex}</li>
                </ul>
            )
        }
    }
    // 指定属性 默认值
    Person.defaultProps = {
        age: 18,
        sex: '男'
    }
    // 对 props 中的属性值进行类型限制和必要性限制
    Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    }

    // 2、渲染组件
    const p1 = {
        name: 'Tom',
        age: 18,
        sex: '女'
    }
    ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />, document.getElementById("example1"))

    const p2 = {
        name: 'Jack',
    }
    ReactDOM.render(<Person name={p2.name} age={20}  />, document.getElementById("example2"))

    /**
     *  ... 的作用
     *  1、打包
     *  function fn(...as){}  fn(1, 2, 3)  : 打包的意思
     *  2、解包
     *  const arr1 = [1, 2, 3]  const arr2 = [6, ...arr1, 9]  ：解包的意思
     *
     * @type {
  {name: string}}
     */
    const p3 = {
        name: 'Feng',
    }
    ReactDOM.render(<Person  {...p3} />, document.getElementById("example3"))
</script>
</body>

页面：
在这里插入图片描述

5.2.4 步骤、技术点

新添加了一个js：prop-types，这个库是在子组件中，对父组件传给子组件的属性值进行加以设定。

在渲染虚拟dom，ReactDOM.render(<Person />, document.getElementById("example3"))
向 HTML标签一样，添加属性，往里面传值，在组件类 Person中通过 this.props.属性名获取值。
扩展运算符（三点运算符）...：将对象的所有属性通过props传递

5.2.5 问题：区别state和props

请区别一下组件的props和state属性

state: 组件自身内部可变化的数据
props: 从组件外部向组件内部传递数据, 组件内部只读不修改

5.3 component_refs

5.3.1 需求描述

需求: 自定义组件, 功能说明如下:

点击按钮, 提示第一个输入框中的值
当第2个输入框失去焦点时, 提示这个输入框中的值

5.3.2 refs属性

组件内的标签都可以定义ref属性来标识自己
a. <input type="text" ref={input => this.msgInput = input}/>
b. 回调函数在组件初始化渲染完或卸载时自动调用
在组件中可以通过this.msgInput来得到对应的真实DOM元素
作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

5.3.3 事件处理

通过onXxx属性指定组件的事件处理函数(注意大小写)
a. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
b. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target  //返回input对象
}

5.3.4 强烈注意

组件内置的方法中的this为组件对象
在组件类中自定义的方法中this为null
a. 强制绑定this: 通过函数对象的bind()
b. 箭头函数(ES6模块化编码时才能使用)

5.3.5 代码实例

<body>
<div id="example1"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
        /**
         * 事件 与 ref
         * 需求：自定义组件，功能说明
         * 1、界面如图所示
         * 2、点击按钮，提示第一个输入框中的值
         * 3、当第二个输入框失去焦点时，提示这个输入框中的值
         */
        // 1、创建组件
    class MyComponent extends React.Component {
        constructor(props) {
            super(props)
            this.showInput = this.showInput.bind(this)
            this.handleBlur = this.handleBlur.bind(this)
        }

        showInput() {
            const value = this.refs.content.value;
            alert(value)
            alert(this.input.value)
        }
        // 事件都有一个固定的形参
        handleBlur(event) {
            console.log(event)
            console.log(event.target)   //指的是标签
            // event.target : 指的是 input 表单框
            alert(event.target.value)
        }

        /* 最后一个比较特别，操作的 dom 元素，是发生事件的元素。*/
        render() {
            return (
                <div>
                    <input type="text" ref="content"/> &nbsp;&nbsp;
                    <input type="text" ref={input => this.input = input}/> &nbsp;&nbsp;
                    <button onClick={this.showInput}>提升输入</button>
                    &nbsp;&nbsp;
                    <input type="text" onBlur={this.handleBlur} placeholder="失去焦点提示内容"/>
                </div>
            )
        }
    }

    // 2、渲染组件
    ReactDOM.render(<MyComponent/>, document.getElementById("example1"))
</script>
</body>

展示：
在这里插入图片描述

5.3.6 步骤、技术点

大体步骤与前一样

点击事件要在constructor构造器中进行bind()方法绑定。
ref使用方法一：ref属性的value值为唯一值，然后在点击事件中通过 this.refs.ref属性名获取
ref使用方法二：ref属性的value值为回调函数{input => this.inputMsg = input}，返回一个，然后在点击事件中通过 this.inputMsg 获取

六、组件的组合

6.1 需求描述

功能: 组件化实现此功能

显示所有todo列表
输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

6.2 代码实例

<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">

    /**
     * 界面中有一个文本框和按钮，按钮中显示下面的几个数据
     * 下面是一个 ul 列表，默认遍历 数组中的数据。
     * 事件：点击按钮，文本框中的数据出现在下面中的 ul 列表中
     */

    /**
     *问题:数据保存在哪个组件内？
     *     看数据是某个组件需要（给它），还是某些组件需要（给共同的父组件）
     *问题2：需要在子组件中改变父组件的状态
     *      子组件不能直接改变父组件的状态
     *      状态在哪个组件，更新状态的行为（方法）就应该定义在哪个组件
     *      解决：父组件定义函数，传递给子组件，子组件调用
     *
     *组件化编写功能的流程
     *      1、拆分组件
     *      2、实现静态组件（只有静态界面，没有动态数据和交互）
     *      3、实现动态组件
     *          1）实现初始化数据动态显示
     *          2) 实现交互功能
     */
        // 主界面
    class Counter extends React.Component {
        constructor(props) {
            super(props)
            // 初始化状态
            this.state = {
                todos: ['吃饭', '睡觉', '打豆豆']
            }
            this.addTodos = this.addTodos.bind(this)
        }

        // 定义一个添加的函数
        addTodos(todo) {
            // this.state.todos.unshift(todo)  //不能这么做
            const {todos} = this.state
            todos.unshift(todo)
            // 更新状态
            this.setState({todos})
        }

        render() {
            const {todos} = this.state
            return (
                <div>
                    <h1>Simple TODO List</h1>
                    <Add count={todos.length} addTodos={this.addTodos}/>
                    <List todos={todos}/>
                </div>
            )
        }
    }

    // 子界面
    class Add extends React.Component {
        constructor(prop) {
            super(prop)
            this.addData = this.addData.bind(this)
        }

        render() {
            return (
                <div>
                    <input type="text" ref={input => this.todoInput = input}/>
                    <button onClick={this.addData}>add # {this.props.count + 1} </button>
                </div>
            )
        }

        addData() {
            // 1、读取输入的数据
            const data = this.todoInput.value.trim();
            // 2、检查合法性
            if (!data) {
                return
            }
            // 3、添加
            console.log(data)
            this.props.addTodos(data)
            // 4、清除输入
            this.todoInput.value = ''
        }
    }

    // 数据校验，放在上面出错
    Add.propTypes = {
        count: PropTypes.number.isRequired,
        addTodos: PropTypes.func.isRequired
    }

    // 子界面
    class List extends React.Component {
        render() {
            const {todos} = this.props;
            /* => : 箭头函数的意义，有两个：函数、return， 这里如果加 {}:方法体 的话，里面一定要有 return*/
            /*todos.map((value, index)=><li key={index}>{value}</li>)*/
            return (
                <div>
                    <ul>
                        {todos.map((value, index) => {
                            return <li key={index}>{value}</li>
                        })}
                    </ul>
                </div>
            )
        }
    }

    List.propTypes = {
        todos: PropTypes.array.isRequired
    }
    ReactDOM.render(<Counter/>, document.getElementById('example'))
</script>
</body>

6.3 技术点（注意：数据在哪，操作方法就在哪）

设计三个组件，一个主页面Counter、一个添加页面Add、一个列表页面List
state数据在主页面中，todos数组会传给List组件，todos长度、添加的方法addTodos()会传给Add组件。
注意，方法也可以作为数据传给子组件。通过this.props进行接收。
在Add组件中调用父组件的添加方法。
在List组件中通过this.props.todos 获取数据，然后在render（）方法中进行遍历渲染出来。

6.4 React工具使用，查看三个属性

在Google中安装扩展软件，安装React扩展工具。可以查看自己定义的组件，以及三大属性，其实只能看到state和props，这两个是在组件上，ref是在标签上，这个只能在元素中查看。
看截图：
Counter类组件
在这里插入图片描述
Add类组件

6.5 功能界面的组件化编码流程(无比重要)

拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果
实现动态组件
a. 动态显示初始化数据
b. 交互功能(从绑定事件监听开始)

七、收集表单数据

7.1 需求描述

需求: 自定义包含表单的组件

输入用户名密码后, 点击登陆提示输入信息
不提交表单

7.2 理解

问题: 在react应用中, 如何收集表单输入数据
包含表单的组件分类
a. 受控组件: 表单项输入数据能自动收集成状态
b. 非受控组件: 需要时才手动读取表单输入框中的数据

7.3 代码实例

<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /**
     * 需求： 自定义包含表单的组件
     *  1、界面如下所示
     *  2、输入用户名密码后，点击登陆提示输入信息
     *  3、不提交表单  event.preventDefault()
     */
    class LoginForm extends React.Component {
        constructor(prop) {
            super(prop)
            this.state = {
                pwd: ''
            }
            this.handleLogin = this.handleLogin.bind(this)
            this.handleChange = this.handleChange.bind(this)
        }
        render() {
            return (
                /**
                 * 用户名 为非受控组件
                 * 密码 为受控组件
                 */
                <form action="/test" onSubmit={this.handleLogin}>
                    用户名：<input type="text" ref={input => this.username = input}/>
                    密码： <input type="password" value={this.state.pwd} ref={input => this.password = input}
                               onChange={this.handleChange}/>
                    <input type="submit" value="登陆"/>
                </form>
            )
        }
        handleLogin(event) {
            const uname = this.username.value  // 操作DOM
            const {pwd} = this.state           // 操作react 属性
            alert(`准备提交的用户名为${uname}, 密码${pwd}`)
            // 阻止事件的默认行为（提交）
            event.preventDefault()
        }
        handleChange(event) {
            // 读取输入框的值
            const password = event.target.value
            // 更新pwd的状态
            this.setState({pwd: password})
        }
    }
    ReactDOM.render(<LoginForm/>, document.getElementById('example'))
</script>
</body>

页面：
在这里插入图片描述

7.4 步骤、技术点

步骤与前一致

这里需要理解**受控组件和非受控组件**。
受控组件：通过onChange（）事件，将input值与state的值链接起来，进行统一。

八、组件生命周期

8.1 需求效果

需求: 自定义组件

让指定的文本做显示/隐藏的渐变动画
切换持续时间为2S
点击按钮从界面中移除组件界面

8.2 理解

组件对象从创建到死亡它会经历特定的生命周期阶段
React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

8.3 生命周期流程图

在这里插入图片描述

8.4 生命周期详述

组件的三个生命周期状态:
- Mount：插入真实 DOM
- Update：被重新渲染
- Unmount：被移出真实 DOM
React 为每个状态都提供了勾子(hook)函数
- componentWillMount()（舍弃）
- componentDidMount()
- componentWillUpdate()
- componentDidUpdate()
- componentWillUnmount()
生命周期流程:
a. 第一次初始化渲染显示: ReactDOM.render()
- constructor(): 创建对象初始化state
- componentWillMount() : 将要插入回调
- render() : 用于插入虚拟DOM回调
- componentDidMount() : 已经插入回调
  b. 每次更新state: this.setSate()
- componentWillUpdate() : 将要更新回调
- render() : 更新(重新渲染)
- componentDidUpdate() : 已经更新回调
  c. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)
- componentWillUnmount() : 组件将要被移除回调

8.5 重要的勾子

render(): 初始化渲染或更新渲染调用
componentDidMount(): 开启监听, 发送ajax请求
componentWillUnmount(): 做一些收尾工作, 如: 清理定时器
componentWillReceiveProps(): 后面需要时讲

九、虚拟DOM与DOM Diff算法

9.1 代码实例

class HelloWorld extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        date: new Date()
    }
  }

  componentDidMount () {
    setInterval(() => {
      this.setState({
          date: new Date()
      })
    }, 1000)
  }

  render () {
    console.log('render()')
    return (
      <p>
        Hello, <input type="text" placeholder="Your name here"/>!&nbsp;
        It is {this.state.date.toTimeString()}
      </p>
    )
  }
}

ReactDOM.render(
  <HelloWorld/>,
  document.getElementById('example')
)

9.2 基本原理图

在这里插入图片描述

十、react引用（基于react脚手架）

10.1 使用create-react-app创建react应用

10.1.1 react脚手架

xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
a. 包含了所有需要的配置
b. 指定好了所有的依赖
c. 可以直接安装/编译/运行一个简单效果
react提供了一个用于创建react项目的脚手架库: create-react-app
项目的整体技术架构为: react + webpack + es6 + eslint
使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

10.1.2 创建项目并启动

npm install -g create-react-app
create-react-app hello-react
cd hello-react
npm start

10.1.3 react脚手架项目结构

ReactNews
    |--node_modules---第三方依赖模块文件夹
    |--public
        |-- index.html-----------------主页面
    |--scripts
        |-- build.js-------------------build打包引用配置
    |-- start.js-------------------start运行引用配置
    |--src------------源码文件夹
        |--components-----------------react组件
        |--index.js-------------------应用入口js
    |--.gitignore------git版本管制忽略的配置
    |--package.json----应用包配置文件 
    |--README.md-------应用描述说明的readme文件

10.2 项目结构

在这里插入图片描述
项目入口 js index.js

10.2 demo：评论管理

效果：
在这里插入图片描述
拆分组件：
应用组件: App

state: comments/array
添加评论组件: CommentAdd
state: username/string, content/string
props: add/func
评论列表组件: CommentList
props: comment/object, delete/func, index/number
评论项组件: CommentItem
props: comments/array, delete/func

实现静态组件

实现动态组件

1、动态展示初始化数据

初始化状态数据
传递属性数据

2、响应用户操作, 更新组件界面

绑定事件监听, 并处理
更新state

10.3 demo：评论管理

项目目录：
在这里插入图片描述

代码上库啦。

十一、react ajax

11.1 理解

11.1.1 前置说明

React本身只关注于界面, 并不包含发送ajax请求的代码
前端应用需要通过ajax请求与后台进行交互(json数据)
react应用中需要集成第三方ajax库(或自己封装)

11.1.2 常用的ajax请求库

jQuery: 比较重, 如果需要另外引入不建议使用
axios: 轻量级, 建议使用
a. 封装XmlHttpRequest对象的ajax
b. promise风格
c. 可以用在浏览器端和node服务器端
fetch: 原生函数, 但老版本浏览器不支持
a. 不再使用XmlHttpRequest对象提交ajax请求
b. 为了兼容低版本的浏览器, 可以引入兼容库fetch.js

11.1.3 效果

需求:

界面效果如下
根据指定的关键字在github上搜索匹配的最受关注的库
显示库名, 点击链接查看库
测试接口: https://api.github.com/search/repositories?q=r&sort=stars
在这里插入图片描述

11.1.4 代码实例

<body>
<div id="example"></div>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
<script type="text/babel">
    /**
     * 需求：
     * 1、界面效果如下，
     * 2、根据指定的关键字在GitHub上搜索匹配的最受关注的库
     * 3、显示库名，点击链接查看库
     * 4、测试接口：https://api.github.com/search/repositories?q=r&sort=stars
     */
    class MostStarRepo extends React.Component {
        state = {
            repoName: '',
            repoUrl: ''
        }
        // 最后发请求
        componentDidMount() {
            // 使用 axios 发送 异步的Ajax 请求  re:可以改变可以传  sort=stars：排序模式
            const url = 'https://api.github.com/search/repositories?q=re&sort=stars'
            axios.get(url)
                .then(response => {
                    const result = response.data
                    console.log(response);
                    // 得到数据
                    const {name, html_url} = result.items[0]
                    // 更新状态
                    this.setState({
                        repoName: name,
                        repoUrl: html_url
                    })
                })
                // 错误信息
                .catch(error => {
                    alert(error.message)
                })
            // 使用 fetch 发送异步的 Ajax 请求
            /*fetch(url)
                .then(response => {
                    return response.json()
                })
                .then(data => {
                    // 得到数据
                    const {name, html_url} = data.items[0]
                    // 更新状态
                    this.setState({
                        repoName: name,
                        repoUrl: html_url
                    })
                })*/
        }
        render() {
            const {repoName, repoUrl} = this.state
            if (!repoName) {
                return <h2>Loading</h2>
            } else {
                return <h2>Most star repo is <a href={repoUrl}>{repoName}</a></h2>
            }
        }
    }
    ReactDOM.render(<MostStarRepo/>, document.getElementById('example'))
</script>
</body>

11.2 axios

11.2.1 文档

https://github.com/axios/axios

11.2.1 相关API

1、 GET请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2、 POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

11.3 demo: github users

11.3.1 需求描述

在这里插入图片描述

11.3.2 拆分组件

App

state: searchName/string
Search
props: setSearchName/func

List

props: searchName/string
state: firstView/bool, loading/bool, users/array, errMsg/string

11.3.3 代码实例

上库啦······ 库中代码为：13_react-app

编写静态组件
编写动态组件：componentWillReceiveProps(nextProps): 监视接收到新的props, 发送ajax
使用axios库发送ajax请求

11.4 Fetch

11.4.1 文档

11.4.2 相关API

1、 GET请求

fetch(url).then(function(response) {
  return response.json()
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
});

2、 POST请求

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
}).then(function(data) {
  console.log(data)
}).catch(function(e) {
  console.log(e)
})

十二、几个重要技术总结

12.1 组件间通信

12.1.1 方式一: 通过props传递

共同的数据放在父组件上, 特有的数据放在自己组件内部(state)
通过props可以传递一般数据和函数数据, 只能一层一层传递
一般数据–>父组件传递数据给子组件–>子组件读取数据
函数数据–>子组件传递数据给父组件–>子组件调用函数

12.1.2 方式二: 使用消息订阅(subscribe)-发布(publish)机制

工具库: PubSubJS
下载: npm install pubsub-js --save
使用:
import PubSub from ‘pubsub-js’ //引入
PubSub.subscribe(‘delete’, function(data){ }); //订阅
PubSub.publish(‘delete’, data) //发布消息

12.1.3 方式三: redux

后面专门讲解

12.2 事件监听理解

12.2.1 原生DOM事件

绑定事件监听
a. 事件名(类型): 只有有限的几个, 不能随便写
b. 回调函数
触发事件
a. 用户操作界面
b. 事件名(类型)
c. 数据()

12.2.2 自定义事件(消息机制)

绑定事件监听
a. 事件名(类型): 任意
b. 回调函数: 通过形参接收数据, 在函数体处理事件
触发事件(编码)
a. 事件名(类型): 与绑定的事件监听的事件名一致
b. 数据: 会自动传递给回调函数

12.3 ES6常用新语法

定义常量/变量: const/let
解构赋值: let {a, b} = this.props import {aa} from ‘xxx’
对象的简洁表达: {a, b}
箭头函数:
a. 常用场景
组件的自定义方法: xxx = () => {}
参数匿名函数
b. 优点:
简洁
没有自己的this,使用引用this查找的是外部this
扩展(三点)运算符: 拆解对象(const MyProps = {}, )
类: class/extends/constructor/super
ES6模块化: export default | import

十三、react-router

13.1 项目理解

13.1.1 react-router的理解

react的一个插件库
专门用来实现一个SPA应用
基于react的项目基本都会用到此库

13.1.2 SPA的理解

单页Web应用（single page web application，SPA）
整个应用只有一个完整的页面
点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
当点击路由链接时, 只会做页面的局部更新
数据都需要通过ajax请求获取, 并在前端异步展现

13.1.3 路由的理解

什么是路由?
a. 一个路由就是一个映射关系(key:value)
b. key为路由路径, value可能是function/component
路由分类
a. 后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据
b. 前台路由: 浏览器端路由, value是component, 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件
后台路由
a. 注册路由: router.get(path, function(req, res))
b. 当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
前端路由
a. 注册路由: < Route path="/about" component={About}>
b. 当浏览器的hash变为#about时, 当前路由组件就会变为About组件

13.1.4 前端路由的实现

history库
a. 网址: https://github.com/ReactTraining/history
b. 管理浏览器会话历史(history)的工具库
c. 包装的是原生BOM中window.history和window.location.hash
history API
a. History.createBrowserHistory(): 得到封装window.history的管理对象
b. History.createHashHistory(): 得到封装window.location.hash的管理对象
c. history.push(): 添加一个新的历史记录
d. history.replace(): 用一个新的历史记录替换当前的记录
e. history.goBack(): 回退到上一个历史记录
f. history.goForword(): 前进到下一个历史记录
g. history.listen(function(location){}): 监视历史记录的变化

13.2 react-router相关API

13.2.1 react-router组件

<BrowserRouter>
<HashRouter>
<Route>
<Redirect>
<Link>
<NavLink>
<Switch>

13.2.2 其它

history对象
match对象
withRouter函数

13.3 基本路由使用

13.3.1 效果

在这里插入图片描述

13.3.2 准备

下载react-router: npm install --save react-router@4
引入bootstrap.css: <link rel="stylesheet" href="/css/bootstrap.css">

13.4 嵌套路由使用

13.4.1 效果

在这里插入图片描述

13.5 向路由组件传递参数数据

13.5.1 效果

在这里插入图片描述

13.6 多种路由跳转方式（重要）

一种为标签方式跳转
一种为事件方式跳转：添加事件，需要借助history对象

原来没加router时，组件的属性有 props、state
加上route时，在Route下的组件上，有了history、location、match三个对象。

13.6.1 效果

在这里插入图片描述

13.6.2 代码实例

都上库啦。
代码为 14_react_router，三级路由都在这一个项目中。

十四、React UI

14.1 最流行的开源React UI组件库

14.1.1 material-ui(国外)

```
 官网: http://www.material-ui.com/#/
```

 github: https://github.com/callemall/material-ui

14.1.2 ant-design(国内蚂蚁金服)

```
 PC官网: https://ant.design/index-cn
```
移动官网: https://mobile.ant.design/index-cn

 Github: https://github.com/ant-design/ant-design/

Github: https://github.com/ant-design/ant-design-mobile/

14.2 ant-design-mobile使用入门

14.2.1 效果

在这里插入图片描述

14.2.2 使用create-react-app创建react应用

npm install create-react-app -g
create-react-app antm-demo
cd antm-demo
npm start

14.2.3 搭建antd-mobile的基本开发环境

1、

     下载

npm install antd-mobile --save

2、 src/App.jsx

import React, {Component} from 'react'
// 分别引入需要使用的组件
import Button from 'antd-mobile/lib/button'
import Toast from 'antd-mobile/lib/toast'

export default class App extends Component {
  handleClick = () => {
    Toast.info('提交成功', 2)
  }

  render() {
    return (
      <div>
        <Button type="primary" onClick={this.handleClick}>提交</Button>
      </div>
    )
  }
}

3、

     src/index.js

import React from 'react';
import ReactDOM from 'react-dom'
import App from "./App"
// 引入整体css
import 'antd-mobile/dist/antd-mobile.css'


ReactDOM.render(<App />, document.getElementById('root'))

4、

     index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
  if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
      FastClick.attach(document.body);
    }, false);
  }
  if(!window.Promise) {
    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
  }
</script>

7.2.4. 实现按需打包(组件js/css)

1、下载依赖包
yarn add react-app-rewired customize-cra babel-plugin-import --save

2、修改默认配置:
package.json

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom"
}

3、 config-overrides.js

const {injectBabelPlugin} = require('react-app-rewired');
module.exports = function override(config, env) {
  config = injectBabelPlugin(['import', {libraryName: 'antd-mobile', style: 'css'}], config);
  return config;
};

4、编码

// import 'antd-mobile/dist/antd-mobile.css'

// import Button from 'antd-mobile/lib/button'
// import Toast from 'antd-mobile/lib/toast'
import {Button, Toast} from 'antd-mobile'

扩展，数组方法

1. map()

遍历数组

/**
* 功能：动态展示列表数据
*
* 问题：如何将一个数据的数组 转换为 一个标签的数组   很常用
*      使用数组的map() 方法 和 箭头函数
* */
const names = ['jQuery', 'zepto', 'angular', 'react', 'vue']
 // 1、创建虚拟DOM
 // li 标签一定要带 key属性，而且还不能一样 否则警告
 const ul = (
     <ul>
         {names.map(name=> <li key={name}>{name}</li>)}
     </ul>
 )

2. unshift()

在数组的头部添加新值

3. splice()

splice(value, 1):删除
splice(value, 0, value2):替换
splice(value): 添加

4. filter()

过滤数组，将下标不等于0的过滤掉，返回一个新的数组。

const comments = [
    {username: 'Tom', content: 'React 挺好的！'},
    {username: 'Jack', content: 'React 挺简单的！'}
];

state.filter((comment, index) => {
    return (index !== 0)
});

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

react学习笔记一：入门级小白到脚手架（create-react-app）开发项目

前言

一、helloworld

二、React jsx

2.1 jsx

2.2 动态展示列表数据

2.3 虚拟dom创建的两种方式

2.4 代码实例

2.5 步骤

2.6 技术点

三、组件化、模块化

3.1 组件

3.2 组件化

3.3 模块

3.4 模块化

四、组件定义两种方式

4.1 代码实例

4.2 技术点

五、组件三个属性：state、props、refs

5.1 component_state

5.1.1 需求说明

5.1.2 state

5.1.2 代码实例

5.1.3 步骤

5.1.4 步骤、技术点

5.2 component_props

5.2.1 需求说明

5.2.2 props

5.2.3 代码实例

5.2.4 步骤、技术点

5.2.5 问题：区别state和props

5.3 component_refs

5.3.1 需求描述

5.3.2 refs属性

5.3.3 事件处理

5.3.4 强烈注意

5.3.5 代码实例

5.3.6 步骤、技术点

六、组件的组合

6.1 需求描述

6.2 代码实例

6.3 技术点（注意：数据在哪，操作方法就在哪）

6.4 React工具使用，查看三个属性

6.5 功能界面的组件化编码流程(无比重要)

七、收集表单数据

7.1 需求描述

7.2 理解

7.3 代码实例

7.4 步骤、技术点

八、组件生命周期

8.1 需求效果

8.2 理解

8.3 生命周期流程图

8.4 生命周期详述

8.5 重要的勾子

九、虚拟DOM与DOM Diff算法

9.1 代码实例

9.2 基本原理图

十、react引用（基于react脚手架）

10.1 使用create-react-app创建react应用

10.1.1 react脚手架

10.1.2 创建项目并启动

10.1.3 react脚手架项目结构

10.2 项目结构

10.2 demo：评论管理

10.3 demo：评论管理