React基础

前言

从网上视频自学React对于React的一些基础总结个人觉得。React相较于Vue来说Vue学起来更简单一些，且在写代码方面Vue更简单一些，对于性能方面和源码方面，因为技术欠佳暂且不谈。

组件

React的组件跟Vue是有区别的，我们在写Vue的组件的时候我们的组件是.vue的文件，React组件以.JS文件。 # react组件的概念 react组件基本上和Vue一样但是写法有所不同正所谓Vue是自动挡，react是手动挡。

react组件如何写

建议在去写组件的时候单独创建一个文件夹components文件夹。
react的组件还是js文件，不过要这样写，首先我们要引入react和react-dom，然后利用react的component来写
例如这样：

class 名字 extends 要继承的方法 是es6的一种新特性也就是继承，这个是有关于构造函数的。 但是要知道return ( ) 里边只能有一个DOM节点,这个就和Vue很像Vue的组件里边也是只能有一个DOM节点，且如果我们想要使用这个组件那么必须要有export default进行导出，然后想在哪里用这个组件就要进行引入这个该组件的js文件。

最后的src下的index.js文件应该这样写：

# 多组件嵌套 我们有多个组件如果我们需要组件嵌套那么我们就可以在需要嵌套组件的组件标签中引入该组组件，然后在需要嵌套的组件的render函数的return 的括号里的dom节点里写该组件标签即可。不过我们还有下面引用组件的方法，就是我们可以在render里去声明变量然后把组件标签赋值给变量我们在DOM节点里使用插值语法即 {变量名即可}，例如：

## 这样在render函数里通过声明变量去使用组件的好处就是可以对组件去进行判断或者进行其他操作。例如

# 注意： 我们在react里使用插值语法时是与 Vue里的插值语法有所不同的Vue在 <p v-bind:id="在这里插值要使用v-bind的指令">在这里插值要使用{{}}</p>，在react里边如果是在标签里边 <p 比如这里> </p> 要使用{{}}去进行插值，<p> 在这里 </p> 要使用{} 去进行插值 例如：

三元表达式的使用

在标签里可以使用三元表达式来进行对数据的一些判断或者显示,不过要是在标签里比如，< p > 在这里使用三元表达式 p> 一定要用 {} 包裹三元表达式

例子：

# 在标签内部插值或者使用三元表达式 要在标签内部

例子：

# 注释 我们在react的组件都是js文件我们在，组件里的js代码里写注释可以正常写，但是要在组件的DOM结构里写注释要要用{/**/}包裹 例子：

state属性

这个state属性的作用就相当于Vue中的data用来存储动态数据的不过使用方法有点不同。 例子： 这个设置state属性要写在render外边

constructor函数

该函数是关于构造函数的继承的，首先返回构造对象的所有函数， ## super() 这个super是用来对所有的基类方法进行初始化

# 修改 state属性 修改可以要使用this.setstate()方法进行修改

例子：

数据双向绑定

在Vue中我们的数据双向绑定使用v-model"" 即可，但是在react中却没有我们要自己写

例子：

看上面例子的代码   onChange事件为用户只要输入都会执行该事件函数然后在事件函数里边再去进行修改state里的数据就实现了数据双向绑定


  # 父子通信

react的父子通信使用props属性通信

props

props属性同样跟Vue中的一样是用来作父子组件间通信的，不过使用方法不太一样，首先在父组件中找到要传递数据的子组件的组件标签内设置自定义属性="要传递的数据"，然后在子组件中使用this.props.自定义属性名即可获取该数据 例子： 父组件

子组件：

子父通信

第一种方法实现子父通信

这种方法实现的子父通信用到props属性首先要进行父子通信之后才能进行子父通信没有去进行直接的子父通信。

首先现在父亲组件里去定义一个函数然后通过父子通信将该函数传递给子组件之后，在子组件里边去进行调用该通过父子通信传递过来的函数函数，然而再子组件去调用该函数的时候传递的参数就传递到了父组件里边

父组件：

子组件：

兄弟组件通信

兄弟间组件通信，一般的思路就是找一个相同的父组件，这时候既可以用props传递数据,如果适用的话可以选择进行使用Redux去进行通信

事件

onClick 点击事件, onChage 监测输入框正在输入的事件 ，onBlur 输入框市区焦点的事件

# 调用事件函数

事件名={this.事件函数名.bind(this,要传递的参数)}
   我们可以以在事件函数里使用event参数来接受传递的参数如果没有传递参数那么event就是关于调用该事件函数的DOM节点


注意：当我们再去调用事件函数的时候必须要加上.bind(this,要传递的参数)   这里边涉及到this的指向问题

有几种情况：
   第一：不使用.bind(this) ，且在事件函数里边不用this

                         如果我们不去使用.bind(this)来调用的话那么我们的事件函数里边一定不要有关于this的操作，因为不使用.bind(this)那么该事件函数里的this是指向当前的事件函数的，如果使用了.bind(this)那么该事件函数里的this是指向该组件的

   第二： 不使用.bind(this),但是事件函数里一定要有关于this的操作
                    那么我们要在事件函数里的第一行加上这一条代码  " this.事件函数名=this.事件函数名.bind(this)"，加上了这一条代码就可以在事件函数里使用关于this的操作

    第三    不是用.bind(this),也不使用第二条的方法

                 事件函数使用箭头函数去进行定义


    关于以上这三种情况建议：
                如果事件函数里的关于this的操作是关于该函数的那么就可以不需要多写任何操作，如果是有关于组件的this那么在调用事件函数的时候使用.bind(this)

用js的形式写css样式

用js的形式写css我们需要使用定义对象的方法，我们需要先声明一变量，变量的值为对象，对象里的属性和属性值即为是css样式，但是我们如果写原声的css样式则需要将属性和属性值都需要加上引号，如果属性不加引号那么例如：background-color 就要这样写backgroundColor

写完样式之后我们只需要在标签里边协商style属性={样式} 即可

例子：

这样写的css样式只能使用在原生的HTML结构上，不能使用在组件标签上

正常在css文件里写样式

我们可以在写正常的css文件然后在里边写样式，样式写完之后我们只需要在index.html里引入该css文件即可，但是我们在react里我们的HTML标签的class要写成clssName不能写class

内联样式表达式

我们在写内联样式是可以使用表达式子去写的，就是内联样式里的数据可以是我们人为去进行控制的且可以在样式中写入三元表达式,不过以往我们使用插值是使用{}  ,但是在内联样式表达式里使用插值要使用()

例子：

jsx与css样式互相转化

因为我们的jsx写的样式与css的样式是有一点区别的我们可以利用下面这个网址来进行jsx样式与css样式的转换

https://staxmanade.com/CssToReact/

路由

使用react的路由我们要通过命令去安装依赖包， 命令: cnpm install --save-dev react-router-dom

使用路由

依赖包安装完成之后我们需要在页面中去进行进行引入才能去进行使用，我们在哪个组件中使用就在哪个组件中引入依赖包然后这样去进行使用

HashRouter 是我们所需要使用了路由因为react里的路由有两种模式，一种是BoweRouter我们正常的   / 下的模式一种是HashRouter模式也就是 #/ 的模式  Nav是我们的导航组件，Switch是我们的当前组件的信息，Router标签的是定义我们当前使用的路由模式，Route标签是我们定义的路由，path就是路由的路径，component就是我们要在路径下显示的组件

## 写完我们的路由之我们要去定义一下我们的导航 导航可以单独写一个文件或者跟路由写在一块也行,导航同样需要使用我们安装的路由的依赖包，里边有一个NavLink组件，就是相当于我们的a标签，to就是要跳转路由的地址

嵌套路由

有时候我们会需要去进行路由的嵌套，路由嵌套是这样的我们需要在有嵌套的路由中写render箭头函数然后用父路由的组件标签包裹住子路由的路由

然后我们需要在父路由的组件里写上{this.props.children}用来显示子路由组件

路由传值

路由间传值我们只需要在path下写上/:自定义名称,然后我们就可以通过link里边的to属性去传值了
 定义传值：

进行传值

接收传递的数据
      this.props.match.params就是我们路由间传递过来的数据