react使用入门

什么是react？
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
特点？
1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
react安装过程？
脚手架环境安装：
全局安装：npm i create-react-app -g
是否安装成功：create-react-app --version
创建项目：create-react-app 项目名字
启动项目：npm start
环境搭建：npm init -y（-y是减少繁琐操作）产生一个package.json文件
npm i react --save
npm i react-dom
npm i babel-standalone --save
引入顺序：react — react-dom — babel
react：是一个核心库
react-dom：浏览器中使用react，把react语法解析成dom标签
babel：解析jsx语法，ES6转为ES5
JSX 的基本使用？
JSX - JavaScript XML
注意：JSX语法，最终会被编译为 createElement() 方法
推荐：使用 JSX 的方式创建组件
JSX的注意点？
1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
类似：label 的 for属性，使用htmlFor代替
2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
3：在 JSX 中只能使用表达式，但是不能出现 语句！！！
4：在 JSX 中注释语法：{/* 中间是注释的内容 */}
React组件？
React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。
组件是由一个个的HTML元素组成的
概念上来讲, 组件就像JS中的函数。它们接受用户输入（props），并且返回一个React对象，用来描述展示在页面中的内容。
创建的两种方式？
1 通过 JS函数 创建（无状态组件）
const 组件名(首字母大写) = (props)=>{
return jsx表达式
｝
2 通过 class 创建（类组件）
class 组件名 extends React。Component｛
render(){
return jsx表达式
}
｝
render是必不可少的钩子函数
render()中可写：this 常用的属性，state props refs
state 是组件内部的数据，
props来自组件外部的数据，
refs标识一个组件的节点
组件的传值：
父组件传值：通过属性传值，子组件用props接收
子组件传值：子组件调用父组件传递过来的方法（回调）通过传递参数传值。
props：
作用：给组件传递数据，一般用在父子组件之间
说明：React把传递给组件的属性转化为一个对象并交给 props
特点：props是只读的，无法给props添加或修改属性
props.children：获取组件的内容。
state（状态即数据）
作用：用来给组件提供组件内部使用的数据
注意：只有通过class创建的组件才具有状态
注意：状态是私有的，完全由组件来控制
注意：不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！
可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this
注意：不要在 render() 方法中调用 setState() 方法来修改state的值
但是可以通过 this.state.name = ‘rose’ 方式设置state（不推荐!!!）
组件生命周期函数：
组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！
三个阶段：挂载阶段、更新阶段、卸载阶段
挂载阶段：
特点：该阶段的函数只执行一次
constructor()
作用：1.获取props
2.初始化states
说明：通过 constructor() 的参数props获取
设置state和props
static getDerivedStateFromProps(props,state)
1.无条件地更新状态，
2.当props和state不匹配时更新state。
render()
作用：渲染组件到页面中，无法获取页面中的DOM对象
注意：不要在render方法中调用 setState() 方法，否则会递归渲染
说明：状态改变会重新调用render()，render()又重新改变状态
componentDidMount()
1 组件已经挂载到页面中
2 可以进行DOM操作，比如：获取到组件内部的DOM对象
3 可以发送请求获取数据
4 可以通过 setState() 修改状态的值
注意：在这里修改状态会重新渲染
更新阶段：
特点：该阶段的函数执行多次
说明：每当组件的props或者state改变的时候，都会触发运行阶段的函数
static getDerivedStateFromProps(props,state)
1.无条件地更新状态，
2.当props和state不匹配时更新state。
shouldComponentUpdate()
作用：根据这个方法的返回值决定是否重新渲染组件，返回true重新渲染，否则不渲染
优势：通过某个条件渲染组件，降低组件渲染频率，提升组件性能
说明：如果返回值为false，那么，后续render()方法不会被调用
注意：这个方法必须返回布尔值！！！
getSnapshotBeforeUpdate()
必须和component()一起使用，必须返回一个值，
目的：为了返回数据更新前的dom状态
componentDidUpdate()
作用：检测数据变化情况
render() 渲染
作用：重新渲染组件，与Mounting阶段的render是同一个函数
注意：这个函数能够执行多次，只要组件的属性或状态改变了，这个方法就会重新执行。
componentDidUpdate()
作用：组件已经被更新
参数：旧的属性和状态对象
卸载阶段：
组件销毁阶段：组件卸载期间，函数比较单一，只有一个函数，这个函数也有一个显著的特点：组件一辈子只能执行依次！
使用说明：只要组件不再被渲染到页面中，那么这个方法就会被调用（ 渲染到页面中 -> 不再渲染到页面中 ）
componentWillUnmount()
作用：在卸载组件的时候，执行清理工作，比如
1 清除定时器
2 清除componentDidMount创建的DOM对象
state和setState
注意：使用 setState() 方法修改状态，状态改变后，React会重新渲染组件
注意：不要直接修改state属性的值，这样不会重新渲染组件！！！
使用：1 初始化state 2 setState修改state
组件绑定事件：
1. 通过React事件机制 onClick 绑定
2. JS原生方式绑定（通过 ref 获取元素）
注意：ref 是React提供的一个特殊属性
React中的事件机制：
1.事件名称采用驼峰命名法
例如：onClick 用来绑定单击事件

事件绑定中的this
1 通过 bind 绑定
原理：bind能够调用函数，改变函数内部this的指向，并返回一个新函数
说明：bind第一个参数为返回函数中this的指向，后面的参数为传给返回函数的参数.
2 通过 箭头函数 绑定
原理：箭头函数中的this由所处的环境决定，自身不绑定this
react-router:
安装：npm i -S react-router-dom
基本概念：Router组件本身只是一个容器，真正的路由要通过Route组件定义。
使用步骤：
1 导入路由组件
2 使用 作为根容器，包裹整个应用（JSX）
在整个应用程序中，只需要使用一次
3 使用 作为链接地址，并指定to属性
4 使用 展示路由内容
注意点：
Router：作为整个组件的根元素，是路由容器，只能有一个唯一的子元素
Link：类似于vue中的标签，to 属性指定路由地址
Route：类似于vue中的，指定路由内容（组件）展示位置
路由参数：
配置：通过Route中的path属性来配置路由参数
获取：this.props.match.params 获取
路由跳转
react router - history
history.push() 方法用于在JS中实现页面跳转
history.go(-1) 用来实现页面的前进（1）和后退(-1)
受控组件:（受控组件和非受控组件）
受控组件的特点：
1 表单元素
2 由React通过JSX渲染出来
3 由React控制值的改变，也就是说想要改变元素的值，只能通过React提供的方法来修改
注意：只能通过setState来设置受控组件的值
React 单向数据流：
React 中采用单项数据流
数据流动方向：自上而下，也就是只能由父组件传递到子组件
数据都是由父组件提供的，子组件想要使用数据，都是从父组件中获取的
如果多个组件都要使用某个数据，最好将这部分共享的状态提升至他们最近的父组件当中进行管理
单向数据流
状态提升
redux（状态管理工具，用来管理应用中的数据）
Action：行为的抽象，视图中的每个用户交互都是一个action
Reducer：行为响应的抽象，也就是：根据action行为，执行相应的逻辑操作，更新state
Store：
1 Redux应用只能有一个store
2 getState()：获取state
3 dispatch(action)：更新state
context：
跨级传递数据（爷爷给孙子传递数据），避免向下每层手动地传递props
需要配合PropTypes类型限制来使用。