React基础总结

React总结

入门

特点

  • Declarative(声明式编码)
  • Component-Based(组件化编码)
  • Learn Once, Write Anywhere(支持客户端与服务器渲染)
  • 高效

高效原因

  • 虚拟(virtual)DOM, 不总是直接操作DOM
  • DOM Diff算法, 最小化页面重绘, 减少重排重绘的次数

使用

相关js库

  • react.js: React的核心库
  • react-dom.js: 提供操作DOM的react扩展库
  • babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

编码

//引入相关库
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel"> //必须声明babel
  // 创建虚拟DOM元素
  const vDom = <h1>Hello React</h1> // 千万不要加引号
  // 渲染虚拟DOM到页面真实DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

虚拟Dom

  • React提供了一些API来创建一种 特别 的一般js对象
var element = React.createElement('h1', {id:'myTitle'},'hello')
  • 上面创建的就是一个简单的虚拟DOM对象
  • 虚拟DOM对象最终都会被React转换为真实的DOM
  • 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面
  • 创建虚拟Dom方法
<body>
            <div id="test"></div>
        </body>
        
<script type="text/babel">
 // 创建虚拟DOM对象
 const vDom1 = React.createElement('p',{id: 'myId1', className: 'myClass1'}, '珂朵莉',vDom3);
// 将虚拟DOM对象插入到页面的指定容器中,渲染虚拟DOM(元素)
ReactDOM.render(vDom1, document.getElementById('test1')); //方法一

 //方法二
    const id = 'myId2';
    const content = '我永远喜欢珂朵莉';
    const vDom3 = React.createElement('span', {}, 'daisiki');
    const vDom2 = <div><h2 id={id } className="myClass2">{content}</h2>{vDom3}</div>
    // 将虚拟DOM对象插入到页面的指定容器中
    ReactDOM.render(vDom2, document.getElementById('test2'));
    const list = ['1', '2', '3', '4'];
    ReactDOM.render(
        <ul>
            { list.map(( item,index) => <li key={index}>{item}</li> ) }
        </ul>
        ,document.getElementById('test3')) 
<script>

JSX

1)全称:  JavaScript XML
2)react定义的一种类似于XML的JS扩展语法: XML+JS
3)作用: 用来创建react虚拟DOM(元素)对象
    a.var ele = <h1>Hello JSX!</h1>
    b.注意1: 它不是字符串, 也不是HTML/XML标签
    c.注意2: 它最终产生的就是一个JS对象
4)标签名任意: HTML标签或其它标签
5)标签属性任意: HTML标签属性或其它
6)基本语法规则
    a.遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    b.遇到以 { 开头的代码,以JS语法解析: 标签中的js代码必须用{ }包含,  //待定:* if/for循环 不能用
7)babel.js的作用
    a.浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    b.只要用了JSX,都要加上type="text/babel", 声明需要babel来处理

React面向组件编程

自定义组件(Component) :

定义组件(2种方式)

/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {
  return <h2>工厂函数组件(简单组件)</h2>
}

/*方式2:  ES6类组件(复杂组件)*/
class MyComponent2 extends React.Component {
  render () {
    console.log(this) // MyComponent2的实例对象
    return <h2>ES6类组件(复杂组件)</h2>
  }
}

渲染组件标签

ReactDOM.render(<MyComponent />, document.getElementById('example1'))

注意

  • 组件名必须首字母大写
  • 虚拟DOM元素只能有一个根元素
  • 虚拟DOM元素必须有结束标签

    • 单标签 <xx />: 当组件没有内容时,直接用单标签
    • 双标签 <xx></xx> : 当组件有内容时,可以用双标签

render()渲染组件标签的基本流程

  • React内部会创建组件实例对象
  • 得到包含的虚拟DOM并解析为真实DOM
  • 插入到指定的页面元素内部

React 的 三大属性

state

  • state是组件对象最重要的属性, 值是对象(可以包含多个数据)
  • 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

用法

  • 初始化

    • 在constructor中定义 this.state = {xxx: xxx},
    • 不在constructor定义:state = {xxx: xxx}
  • 读取 this.state.xxx
  • 更新 this.setState({xxx: xxx})

注意

  1. setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的。
  2. 如果需要获取“异步”场景的 setState 的值 --> this.setState(partial, callback) 在callback中拿到最新的值
  3. 如果要在“异步”场景更新多次 setState --> this.setState((prevState, props) => {return newState})

props

  • 每个组件对象都会有props(properties的简写)属性
  • 组件标签的所有属性都保存在props中

作用

  • 通过标签属性从组件外向组件内传递变化的数据
  • 注意: 组件内部不要修改props数据

使用

  • 约束属性的类型和必要性 static propTypes = {xxx: PropTypes.func.isRequired}
  • 定义属性的默认值 static defaultProps = {xxx: xxx}
  • 内部读取某个属性值,获取组件外向组件内传递的标签属性 this.props.xxx / const { name, age, sex } = this.props;
  • 扩展属性: 将对象的所有属性通过props传递,设置 <List name={xxx}> / <Person {...person}/>
  • 默认属性值: 原来方案Person.defaultProps = {name: 'Mary'} 最新方案:static defaultProps = {

name: 'Mary'}

  • 组件类的构造函数
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}

区别一下组件的props和state属性

  • state: 组件自身内部可变化的数据
  • props: 从组件外部向组件内部传递数据, 组件内部只读不修改

refs

介绍

组件内的标签都可以定义ref属性来标识自己, 用来获取DOM元素
在组件中可以通过this.msgInput来得到对应的真实DOM元素

a.    <input type="text" ref={this.createRef}/> (推荐使用)
b.    <input type="text" ref={input => this.funcRef = input}/> 
c.    <input type="text" ref="stringRef" /> (即将废弃)
d.    回调函数在组件初始化渲染完或卸载时自动调用

作用: 通过ref获取组件内容特定标签对象, 进行读取其相关数据

使用

1.<input type="text" ref={this.createRef}/>
 2.<input type="text" ref={(input) => this.funcRef = input}/>
 3.<input type="text" ref="stringRef"/>
     constructor(props) {
        super(props);
        this.createRef = React.createRef();
      }
      
// 获取input标签的值
1. this.createRef.current
2. console.log(this.funcRef);
3. console.log(this.refs.stringRef);

事件处理

  • 通过onXxx属性指定组件的事件处理函数(注意大小写)

    • a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
    • b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
  • 通过event.target得到发生事件的DOM元素对象

    <input onFocus={this.handleClick}/>
    handleFocus(event) {
    event.target  //返回input对象
    }

强烈注意

  • 1)组件内置的方法中的this为组件对象
  • 2)在组件类中自定义的方法中this为undefined

    • a. 强制绑定this: 通过函数对象的bind()
    • b. 箭头函数(ES6模块化编码时才能使用)
  • React组件中函数this指向规则

    • 组件内置的方法中的this为组件的实例对象
    • 在组件类中自定义的方法中this为undefined
    • 通过函数对象的bind()强制绑定this指向为组件实例对象,也就是this
    • 箭头函数this就能指向实例对象(ES6模块化编码时才能使用)
    • 工厂函数组件中this为undefined
    • ES6类组件(复杂组件)this为组件的实例对象

表单的组件分类

  • 受控组件: 表单项输入数据能自动收集成状态(onChange)
  • 非受控组件: 需要时才手动读取表单输入框中的数据(onClick)

组件化编码流程和套路

组件编码流程:

1.拆分组件:根据页面功能拆分
  APP
  AddTodo
  TodoList
2.实现静态组件
  先实现大的组件(最外层的),再实现里面的组件
  先有一个基本的显示效果
3.实现动态组件
  1.需不需要定义状态数据? 看页面是否有变化,有变化就要定义状态数据
  2.状态数据定义在哪里? APP
     如果数据是单个组件需要,就定义在单个组件中
     如果数据是多个组件需要,就定义在公共的父组件中,也就是引用了那几个多组件的父组件
  3.状态数据定义为什么?
     定义成对象、数组、基本数据类型。
     方便插入数据和遍历展示,所以用数组
 4.子组件如何操作父组件的数据
     父组件定义操作数据的方法(数据再哪,操作数据的方法就在在哪)
     父组件将操作数据的方法传给子组件,子组件调用就能修改父组件的数据

组件的生命周期函数

理解

  • 组件对象从创建到死亡它会经历特定的生命周期阶段
  • React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调
  • 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

生命周期详述

  • 组件的三个生命周期状态:

    • Mount:插入真实 DOM,渲染时
    • Update:被重新渲染,更新时
    • Unmount:被移出真实 DO,,卸载时
  • React 为每个状态都提供了勾子(hook)函数

    • componentWillMount()
    • componentDidMount()
    • componentWillUpdate()
    • componentDidUpdate()
    • componentWillUnmount()
  • 生命周期流程:

    • 第一次初始化渲染显示: ReactDOM.render()

      • constructor(): 创建对象初始化state
      • componentWillMount() : 将要插入回调
      • render() : 用于插入虚拟DOM回调
      • componentDidMount() : 已经插入回调
    • 每次更新state: this.setSate()

      • componentWillUpdate() : 将要更新回调
      • render() : 更新(重新渲染)
      • componentDidUpdate() : 已经更新回调
    • 移除组件: ReactDOM.unmountComponentAtNode(containerDom)

      • componentWillUnmount() : 组件将要被移除回调

生命周期函数作用:

constructor()`
    * 初始化state
    * 修改函数的this指向
    * 只会执行一次
 static getDerivedStateFromProps(nextProps, prevState)`
    * 一般不用
    * 使组件能够根据props的更改来更新其内部状态
 render()`
    * 渲染组件
 componentDidMount()`
    * 发送ajax请求
    * 执行异步任务
    * 只会执行一次
 shouldComponentUpdate(nextProps, nextState)`
    * react性能优化,减少不必要的render
 getSnapshotBeforeUpdate(prevProps, prevState)`
    * 一般不用
    * 可以在渲染之前得到DOM对象从而获取一些信息
 componentDidUpdate(prevProps, prevState, snapshot)`
    * 更新组件完成时对DOM进行操作
    * 发送ajax请求(注意不要陷入死循环)
 componentWillUnmount()`
    * 清除定时器,收尾工作等

重要的生命周期(必须掌握)

  • constructor()
  • render() 初始化渲染或更新渲染调用
  • componentDidMount() 开启监听, 发送ajax请求
  • componentWillUnmount() 做一些收尾工作, 如: 清理定时器
  • componentDidUpdate() 可以获取更新后DOM元素,从而进行操作
  • shouldComponentUpdate 专门用来做React性能优化的:将之前的状态/属性和当前的状态/属性进行对比,如果一样,就不更新,如果不一样就更新
    返回值为true就更新
    返回值为false就不更新

React脚手架

介绍

  • xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

    • a. 包含了所有需要的配置
    • b. 指定好了所有的依赖
    • c. 可以直接安装/编译/运行一个简单效果
  • react提供了一个用于创建react项目的脚手架库: create-react-app
  • 项目的整体技术架构为: react + webpack + es6 + eslint + babel
  • 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

npm install -g create-react-app  //全局安装create-react-app
create-react-app hello-react    //创建一个项目名称为hello-react的脚手架              
npm start                      //必须在hello-react文件目录下运行

react脚手架项目结构

ReactNews
    |--node_modules---第三方依赖模块文件夹
    |--public
        |-- index.html-----------------主页面
    |--src------------源码文件夹
        |--components-----------------react组件
        |--index.js-------------------应用入口js
    |--.gitignore------git版本管制忽略的配置
    |--package.json----应用包配置文件 
    |--README.md-------应用描述说明的readme文件

react ajax

前置说明

  • React本身只关注于界面, 并不包含发送ajax请求的代码
  • 前端应用需要通过ajax请求与后台进行交互(json数据)
  • react应用中需要集成第三方ajax库(或自己封装)

常用的ajax请求库

  • jQuery: 比较重, 如果需要另外引入不建议使用
  • axios: 轻量级, 建议使用

    • a. 封装XmlHttpRequest对象的ajax
    • b. promise风格
    • c. 可以用在浏览器端和node服务器端
  • fetch: 原生函数, 但老版本浏览器不支持

    • a.不再使用XmlHttpRequest对象提交ajax请求
    • b.为了兼容低版本的浏览器, 可以引入兼容库fetch.js
    • https://github.github.io/fetch/
    • https://segmentfault.com/a/11...
componentDidMount(){
            //发送Ajax请求
          /* axios.get('https://api.github.com/search/repositories?q=r&sort=stars')
                //axios.get('/user', {params: {q:r,sort:stars}})
                //axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'})
               .then(response => {
                   const {name, html_url} = response.data.items[0];
                   this.setState({ name,url: html_url})
                    })
               .catch(err =>{
                   console.log(err);
                   })*/
         fetch('https://api.github.com/search/repositories?q=v&sort=stars')
            //get: fetch(url) post: fetch(url, {method: "POST" body:JSON.stringify(data),})
               .then(res => res.json())
               .then(response =>{
                   console.log(response);
                   const {name, html_url} = response.items[0];
                   this.setState({name,url: html_url })
                    })
               .catch(err =>{
                   console.log(err);
               })
        }

react路由

相关理解

react-router的理解

  • react的一个插件库
  • 专门用来实现一个SPA应用
  • 基于react的项目基本都会用到此库

SPA的理解

  • 单页Web应用(single page web application,SPA)
  • 整个应用只有一个完整的页面
  • 点击页面中的链接不会刷新页面, 本身也不会向服务器发请求
  • 当点击路由链接时, 只会做页面的局部更新,网址也会对应的改变
  • 数据都需要通过ajax请求获取, 并在前端异步展现

路由的理解

什么是路由?
  • 一个路由就是一个映射关系(key:value)
  • key为路由路径, value可能是function/component
路由分类
  • 后台路由: node服务器端路由, value是function, 用来处理客户端提交的请求并返回一个响应数据

    • a. 注册路由: router.get(path, function(req, res))
    • b. 当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
  • 前台路由: 浏览器端路由, value是component(组件), 当请求的是路由path时, 浏览器端前没有发送http请求, 但界面会更新显示对应的组件

    • a.注册路由: <Route path="/about" component={About} />
    • b.当浏览器的hash变为#about时, 当前路由组件就会变为About组件
区别:
* 前端路由
    * 不需要发送请求
    * 不会刷新整个页面,局部更新
    * 会修改url地址和浏览器历史记录
    * value是component
* 后端路由
    * 会发送请求
    * 会刷新整个页面
    * 会修改url地址和浏览器历史记录
    * value是callback
  • 使用前端路由的作用:

    • 用来开发SPA(单页面应用)
    • 整个应用一个完整页面
    • 不需要发送请求
    • 不会刷新整个页面,局部更新
    • 会修改url地址和浏览器历史记录

前端路由的实现

history库

a.    网址: https://github.com/ReactTraining/history
b.    管理浏览器会话历史(history)的工具库
c.    包装的是原生BOM中window.history和window.location.hash

history API

a.    History.createBrowserHistory(): 得到封装window.history的管理对象
b.    History.createHashHistory(): 得到封装window.location.hash的管理对象
c.    history.push(): 添加一个新的历史记录
d.    history.replace(): 用一个新的历史记录替换当前的记录
e.    history.goBack(): 回退到上一个历史记录
f.    history.goForword(): 前进到下一个历史记录
g.    history.listen(function(location){}): 监视历史记录的变化

react-router相关API

组件

1)    <BrowserRouter>
         browserHistory 是使用 React-Router 的应用推荐的 history方案。
         它使用浏览器中的 History API 用于处理 URL,创建一个像example.com/list/123这样真实的 URL 
         <BrowserRouter><App /></BrowserRouter>
    2)    <HashRouter>
        
    3)    <Route>
         <Route path="/about" component={About}/>
         <Route path="/home/message/:id" component={MessageDetail}/>
          一旦url变为path对应的值,就加载component中的组件进行显示
    4)    <Redirect>
         <Redirect to="/about"/>
         什么路径都匹配,一旦匹配上就跳转到指定网址,与Switch配合使用
    5)    <Link> 
          只修改url的地址,不会发送请求      
          <Link to="/home">珂朵莉</Link>
    6)    <NavLink> 
         只修改url的地址,不会发送请求,并且多了一个class:active  
        export default function MyNavLink(props) {
           return <NavLink {...props} activeClassName='activeClass'/>
           }
        <MyNavLink to="/about">About</MyNavLink>
    7)    <Switch>
        切换显示(针对内部组件 - 子组件) --> 从上到下匹配,一旦有一个匹配上,其他就不看了
        <Switch>
           <Route path="/about" component={About}/>
           <Route path="/home" component={Home}/>
           <Redirect to="/about"/>
        </Switch>
  • 路由组件:通过Route组件加载的组件(import { withRouter } from 'react-router-dom')

    • history 修改浏览器历史记录
    • location 获取请求path
    • match 获取params参数
    • withRouter 作用:给非路由组件传递路由组件三个属性(history、location、match)@withRouter

react-ui库

material-ui(国外)

ant-design(国内蚂蚁金服)

相关推荐