React初级教学

1.什么是React

React 是一个用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。所以React是用组件搭建页面

2.JSX 语法

JSX 它是一种JavaScript语法扩展，可以将HTML 语言直接写在 JavaScript 语言之中，不加任何引号。 单标签使用 /> 来闭合标签

如：

const element = 
Hello, world!
;

3.ReactDOM.render()

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。其中第一个参数是要插入的内容，而第二个参数则是页面中被插入组件。

例：

    

    

    

    

    

    

    

    

    

    

    

    

        const showdemo = 132

        ReactDOM.render(showdemo, document.querySelector('#demo'))

    

4.组件

1.如何创建组件

其中组件名首字母大写，不然会报错。

   class 组件名 extends React.Component {

        }

2.render()

render方法的实质就是生成template模板，是 class 组件中唯一必须实现的方法

 class ChangeState extends React.Component{

                 render(){

                     const {flag,num} = this.state;

                     return  

 123 

                 }

             }

3.state

定义 state 来更新和修改数据。

正确地使用 State：

1.不要直接这样修改的数据不会直接渲染到页面上。

例如：this.state.comment = 'Hello';

2.修改state应该使用 setstate()。

例如：this.setState({comment: 'Hello'});

3.由于React 可能会把多个 setState() 调用合并成一个调用。所以setState()更新可能是异步的，这样就不能及时把数据渲染到页面上，所以可以让 setState() 接收一个函数而不是一个对象

例 : this.setState((state, props) => ({ counter: state.counter + props.increment }));

4.props

1.当外界传值到组件中时可以用props接收，如：当传入值的名称为data时，可以用 this.props.data

接收。组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。但是可以把props的值给state，然后修改state。

2.你可以通过组件类的 defaultProps 属性为 props 设置默认值：

例如：

class Person extends React.Component {

            render() {

                //props基础用法

                const { realname, age } = this.props;

                return (

                    

                        

• 姓名：{realname},年龄：{age}

                    

                )

            }

            //对props的限制

            static propTypes = {

                realname: PropTypes.string.isRequired,

                age: PropTypes.number

            }

            static defaultProps = {

                realname: '张三'

            }

        }

5.ref

绑定的ref的取到节点dom,然后可以在组件中打点调用。

方法：

1.ref=字符串

ref="userInput" type="text" placeholder="请输入用户名"/>

2.回调函数

现在组件中创建ref

 const {userInput} = this;

然后再 

ref={(e)=>{this.userInput=e}}>123

3.官方推荐

依旧是创建

 userInput = React.createRef();

然后再 

ref={this.userInput}>123

6、路由

1.定义

什么是路由：给我一个路径，然后进行操作。

2.react-router-dom

定义：react的插件库，基于react项目都会用到此库。

安装：npm  add react-router-dom

3.初步使用

1. BrowserRouter

作用:路由链接和注册路由都写在此内，这个可以写在最外层index.js中。这样里面的就都不用写了

例如：

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App' 

ReactDOM.render(
 
    
 
,document.getElementById('root'))

2.路由链接

要先从 react-router-dom 中引入 Link

Link会在显示页被翻译为a标签，Link的 to = “路径” 会被翻译为 href=“路径”

import { Link, Route } from 'react-router-dom'           //引入

 新闻                                //使用

3.注册路由 

要先从 react-router-dom 中引入 route

import { Link, Route } from 'react-router-dom'                 //引入

import Hello from './pages/Hello/hellow.js'                       //引入的组件

        //使用 path是路径，component是                                                                                              引入的组件。

当点击路由链接的时候，会跳转到对应的路由注册的页面。

4.进阶写法

如果Link不封装，每次用都要引用机器不方便，所以可以在组件中封装一下

import React from "react";
import {
    Link
} from "react-router-dom";

export default class MyLink extends React.Component {
    render() {
        console.log(this.props);
        return 
    }
}

通过打印

 可以看出 this.props中有路径和名称，所以直接在Link标签上解析this.props就可以。

5.Switch

当跳转时，找到组件依然会往下找。但是在注册组件上加了Switch 就不会

例

 

6. Redirect

当没有路由匹配，重定向。

例如

                    

                    

                            //类似于vue中的路由重定向

                

7.路由匹配

NavLink 和Link便签一样的用法，只不过多了个className，点击哪个，是哪个执行className。

注：如果css名 为active那么可以直接用，如果不是则如下

       

4.路由传参

1.传递search参数

1.安装qs

npm add query-string

2.传参页传参格式

{res}

在路径后面加上?分割路径和参数，在参数之间添加&分割数据

完整代码：

import React from "react"
import './index.css'
import MyLink from "../../components/MyLink/MyLink"
import { Route } from "react-router"
import Show from './Show/Show.js' //show就是要跳转的页面
export default class Hello extends React.Component {
    state = {
        list: ['县新闻', '市新闻', '省新闻', '国新闻',]
    }
    render() {
        return 


            {this.state.list.map((res, index) => { return {res} })}

        
            //注册路由
            
    }
}

3.跳转页接收数据

用 this.props.location来接收数据，然后获得传的数据，通过qs来解码数据

const { search } = this.props.location; //解析出search 获得数据

const { id, data } = qs.parse(search.slice(1)) //由于数据第一个字符是‘?’ 所以删除第一个字                                                                             符，然后用 qs.parse() 解析成对象

完整代码

import qs from 'qs'
import React from 'react'

export default class Show extends React.Component {

    render() {
        const { search } = this.props.location;
        const { id, data } = qs.parse(search.slice(1))

        return 
id:{id}
            
data:{data}

        
    }
}

2.传递params参数

1.携带参数

 /${item.id}/${item.title}`}>{item.title} //用 ‘/’ 来分割数据

2.声明接收参数

:id/:title" component={Content}/> //接收数据，是每个数据                                                                                                                都获得相应的键名,注                                                                                                      册路由的参数部分一定要加 : 

3.得到参数

const {params} = this.props.match;

全部代码：

传参页

import React from "react"
import './index.css'
import MyLink from "../../components/MyLink/MyLink"
import { Route } from "react-router"
import Show from './Show/Show.js'
export default class Hello extends React.Component {
    state = {
        list: ['县新闻', '市新闻', '省新闻', '国新闻',]
    }
    render() {
        return 


            {this.state.list.map((res, index) => {
    
                return {res}
            })}

        
            
            
    }
}

数据接受页

import qs from 'qs'
import React from 'react'

export default class Show extends React.Component {

    render() {
        /*  const { search } = this.props.location;
         const { id, data } = qs.parse(search.slice(1)) */

        const { id, data } = this.props.match.params
        return 
id:{id}
            
data:{data}

        
    }
}

3.传递state参数

1. 传参页

传参页路径传递一个对象，对象中有 pathname 和 state

 传参

而且，无需在路由注册中声明。

2.接受页：

const {id,title} = this.props.location.state;

5.编程式路由

编程式路由：通过函数实现跳转

1.param传参

goto = (index, res) => {

        this.props.history.push(`/hello/show/${index}/${res}`)

    }

:id/:title" component={Show}/>

接收方式和上面的param传参一样

2.search传参

goto = (index, res) => {

        this.props.history.push(`/hello/show？id=${index}&title=${res}`)

    }

接收方式和上面的search传参一样

3.传递state参数

 goto = (index, res) => {

        this.props.history.push('/hello/show', { id: index, data: res })

    }

接收方式和上面的state传参一样

6. withRoute用法

作用：让普通组件拥有路由组件的history，也能实现前进，后退等方法。

用法：从react-router-dom 中解析出withRouter函数

import React from "react";

import { withRouter } from 'react-router-dom'

class GoBack extends React.Component {

    goback = () => {

        this.props.history.goBack()

    }

    render() {

        return 后退按钮

    }

}

export default withRouter(GoBack)

未完待续····