React笔记

react是facebook发布的一个前端框架与vue，angular并称为前端三大框架，react与angular的入门难度要稍微高于vue一点。

最近几个月一直在花时间学习react，感觉有点感觉了就来写一下心得，作为以后的参考吧！

一.react中的JSX

react中采用的是JSX,我在使用中的经验是JSX有以下需要注意的地方

1.书写的格式上：一个标签时let a = <div>hello world!</div>，当出现多个标签时外面必须包一层根元素

​

如果不在外面包一层根元素会报错。

2.如果出现单标签标签必须闭合。

<img/> <input/> <br/> <div></div>

3.JSX中可以使用Javascript表达式，因为JSX本质上仍然是JavaScript,不过在使用表达式时要用{}包起来

​

4.在JSX中class不能按照纯html中的写法

​

要写为className的形式，类似的还有onclick要写为onClick等，所以一定要注意这种情况，否则会报错。

二.组件

组件是React的核心概念，是React应用程序的基石，组件间最重要的是组件之间的通信。

1.组件的props

组件的props用于把父组件中的数据或方法传递给子组件。

基本用法例子如下所示

​

2.组件的state

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面。

组件中state的基本用法如下图所示

​

React组件正是由props和state两种类型的数据驱动渲染出组件UI。props是组件对外的接口，组件通过props接收外部传入的数据，state是组件对内的接口，组件内部的状态的变化通过state来反映。

3.注意PropsTypes对象的使用，用于校验组件属性的类型

​

三.组件样式的引用

没有用到react之前对于样式的引用有以下几种方式

1.内联式

<div style=" color:red; font-size:25px ">测试</div>

2.嵌入式， 通过标签名、class或id等方法与标签联系起来设置样式

<style type="text/css">

div{

width: 60px;

}

#mydiv{

height: 70px

}

</style>

3.外联式（外部样式）通过引入外部文件来设置样式

<link rel="stylesheet" type="text/css" href="mystyle.css" />

这几种方式各有优劣，在内联式中距离要生效的代码最近所以最能作用到代码上，但是不能做到html与css相分离；嵌入式可以做到html与css的相对分离但是最好放在页面的下方这样有利于SEO；外联式做到了html于css的完全分离但是会增加http的请求数。

在react中样式的引用有以下几种

1.内联式，注意此时要用{}包起来

<div className='div' style={display:none}></div>

我们知道在JSX中我们可以书写js表达式的，所以如果在内联中要写js表达式时要用{{}}包起来如下例子所示

​

2.将css样式作为一个对象引入

​

3.外部引入CSS文件

​

这种方式和之前通过link标签引入的方式异曲同工，不过采用了ES6中的模块化通过import的方式引入，这样更加的灵活方便。

四.受控组件和非受控组件

受控组件：在 HTML 中，表单元素如 <input>，<textarea> 和 <select> 表单元素通常保持自己的状态，并根据用户输入进行更新。

但是在React中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState() 更新。我们可以通过使 React 的 setState来改变state的值，然后渲染表单的 React 组件也可以控制在用户输入之后的行为。这种形式，其值由 React 控制的输入表单元素称为受控组件。

例子如下图所示：

​

非受控组件：一个表单组件没有value props,就可以称为非受控组件;

在非受控组件中我们要注意，可以使用一个 ref 来从 DOM 获得 表单值，而不是为每个状态更新编写一个事件处理程序。

例子如下所示：

​

五.组件的生命周期

使用react很大的一个好处就是使得元素的整个生命周期都变的可控，使得组件的每一个状态我们都了然于心，这样我们就可以清晰明了的观察到在整个项目中的数据流动。

这几个生命周期相关的函数有：

constructor(props, context) 构造函数，在创建组件的时候调用一次。

在组件挂载之前调用一次,如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。

void componentDidMount()

在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。

void componentWillReceiveProps(nextProps)

props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。

bool shouldComponentUpdate(nextProps, nextState)

组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。

void componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。

void componentDidUpdate()

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。

render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。记住，不要在render里面修改state。

组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

更新方式：

在react中，触发render的有4条路径

以下假设shouldComponentUpdate都是按照默认返回true的方式。

1. 首次渲染Initial Render
   
2. 调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）
   
3. 父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
   
4. 调用this.forceUpdate
   

下面是我对React组件四条更新路径地总结：

​

注意在组件的生命周期部分借鉴了博主Ning静致远转载文章中的部分内容。

大家需要注意的是react在服务器端和前端的渲染有部分的不同。

在componentDidMount中执行服务器通信可以保证和获取到数据时，组件已经处于挂载状态，这时即使要直接操作DOM也是安全的。

六.React-Router

React-Router主要是来开发单页面应用的，在传统的web应用中，浏览器根据地址栏的URL向服务器发送一个HTTP请求，在这种情况下一个URL对应一个HTML页面，这样在多页面的应用中每次页面的切换都需要向服务器发送一次请求，页面使用到的静态资源也需要重新请求加载，存在一定的浪费。但是使用React-Router来开发单页面应用可以减少http的请求数，页面的的切换也不必重新发起请求，不过要提醒大家的是这种方式不利于SEO，而且第一次请求时需要一次性加载大量的资源。

React-Router使用也不是很难只要按照套路来就行了，如下图所示：

​

但是在路由变得过多时这种写法就变的不太适用了，这里我就不多说了对路由这方面我了解的也不多。