react2

用户6383744403784
142 阅读4分钟

安装

  • create-react-app my-app

react的特点

  1. 声明式开发
  2. 可与其他框架共存
  3. 组件化
  4. 单向数据流
  5. 函数式编程

react 通信

父组件向子组件通信

  • 通过传递属性实现

子组件向父组件通信

  • 父组件向子组件传递属性 属性值为父组件的方法

  • 子组件触发方法后 使用父组件的方法传递子组件的数据

  • 当组件初次创建的时候 rendre 函数会执行一次

  • 之后当state中数据改变后 render函数会继续执行一次 当props数据发送变更的时候 render函数会被重新执行

ref 获取DoM节点

ref 写在Dom节点上获取的是Dom元素 ref 写在组件上 获取的是js实例 使用 在Dom 节点上绑定 ref={（name）=>{this.Element=name}}

this.setState({}) 是异步的

还可以这样写

同步写法

this.setState(()=>{
    return {
        key:value
    }
},()=>{
    上面函数执行完后才会执行
})

React的生命周期函数

组件的生命周期可分成三个状态：

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

1.React生命周期函数指的是: 在React中组件在某一时刻会自动执行的函数。 例如： constructor：在组件开始时自动执行。但是它是ES6里的，不是react独有，因此是普通的类的生命周期函数。 render：当数据发生变化时自动执行（符合定义）

2.React周期 Initialization（初始化） => Mounting(页面挂载，只有组件第一次渲染到页面的时候会执行) => Updation => Unmounting

image.png

生命周期函数：钩子

挂载：

  • componentWillMount:将要挂载；
  • render:挂载；
  • componentDidMount：挂载结束；
  • 变更数据：
  • shouldComponentUpdate：是否要更新？
  • componentWillUpdate:在这里更新；
  • render:重新渲染页面；
  • componentDidUpdate:更新完毕；
  • componentWillUnmount：当一个组件将要被销毁（从页面上被移除）的时候执行

【总结】

1、生命周期函数是针对组件来说的，只有组件里才有生命周期函数，每个组件里都有自己组件内部的生命周期函数。 2、组件第一次被渲染时，执行Initialization和Mounting阶段。 数据发生改变时，如果是父组件的数据发生改变，就执行states流程的四个函数；如果子组件接收到的数据发生变化，就执行父组件states流程的四个函数和子组件的props流程的五个函数。 当组件即将从页面被移除时，执行Unmounting阶段的componentWillUNmount函数。

Ant-Design库的使用

  • Ant Design 组件库的使用：
  • 官网：ant-design.gitee.io/index-cn
  • 安装antd：npm install antd --save
  • 然后在index.js文件中引入样式文件：import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
  • 然后在官网的组件页面（通过网页最上面的导航‘组件’进入），选择相应的组件，再点击代码演示部分里的‘<>’就能看到相应的调用代码

React中的前端路由（1）

1、路由：根据访问的网址的URL不同，代码可以展示出不同的页面内容； React前端路由：当我们访问不同的URL，展示不同组件； 2、React中默认没有路由，所以需要自己安装； 安装路由：npm install react-router-dom --save 3、导入路由：import { BrowserRouter, Route, Link } from "react-router-dom"; BrowserRouter：定义一个路由 Route：路由项 Link：页面（路由）之间的跳转，类似于的功能 4、使用路由： （1）组件名和导入的文件的名字不能重名，否则会报错。 （2）

里只能有一个标签，所以设置多个路由时里面的内容可以使用一个div标签包裹起来。里面的组件也需要导入进来才能设置路由项。 （3）Link的使用： return ( 按钮 ); 首先导入Link：import { Link } from "react-router-dom"; 然后把要实现页面间跳转功能的标签用Link标签包裹起来，并且给Link标签设置to属性，属性值为要跳转的页面的URL（和index.js里Route标签的path属性值一样）

React中的前端路由（2）

1、想实现跳转到某个页面时传递参数， ①可以直接在路径后面加‘？’，然后写上参数（如to='/list?a=123'），但是这种方法获取参数比较麻烦； ②也可以使用如下形式，直接在跳转的路径后面加上一个‘/’，然后在后面写参数：

按钮 2、想要接收到参数，可以在index.js中的路由进行如下配置： path="/list/:id" 的意思是要跳转的那个页面路由是/list，list路径下如果后面有任何参数，参数会被放到id这个变量里 3、之后在路由list对应的组件的render中，使用如下代码即可打印出接收到的参数： console.log(this.props.match.params.id);

switch

  • 设置路由的时候，当一个是'/'，一个是'/detail'的时候，在地址栏输入'/detail'会把这两个路径都匹配上，导致两个组件都会显示出来。
  • 解决方法：
  • ①导入路由的导入Switch：import { BrowserRouter, Route, Switch } from "react-router-dom";
  • ②然后把Route标签包裹在Switch标签里面【如图】，
  • 【Switch是一个选择器，当访问一个路径的时候，会到下面去找和Route匹配的内容，当找到一个的时候就不会继续往下找了，就把匹配到的这个返回。】【所以应该把想要访问的名字长的组件的路由放在上面，以防该组件的路径包含其他组件的路径导致显示的是其他组件的内容】

加了？表示id可传可不传，如果不加问号则id必须传，否则不会进行匹配。

componentWillReceiveProps(nextProps)

componentWillReceiveProps第一次加载页面不执行； 接受到的参数变化的时候执行； nextPorps：接下来props会变成什么样子。

avatar
文章
阅读
粉丝