React基础梳理,万字总结,总能帮到你~

第1章:React入门

1.1.React简介

  • 1.英文官网: https://reactjs.org/
  • 2.中文官网: https://react.docschina.org/
  • 3.用于动态构建用户界面的 JavaScript 库(只关注于视图)
  • 4.Facebook开源

React的特点

  • 1.声明式编码
  • 2.组件化编码
  • 3.React Native 编写原生应用
  • 4.高效(优秀的Diffing算法)

React高效的原因

  • 1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  • 2.DOM Diffing算法, 最小化页面重绘。

1.2.React的基本使用

相关js库

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

创建虚拟DOM的两种方式

image.png

  • 1.纯JS方式(一般不用)
  • 2.JSX方式

虚拟DOM与真实DOM

  • 1.通过一些API来创建一种 “特别” 的一般js对象,例如:const VDOM = React.createElement('xx',{id:'xx'},'xx'),这就是一个简单的虚拟DOM对象
  • 2.虚拟DOM对象最终都会被React转换为真实的DOM。我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

1.3.React JSX

image.png

JSX

  • 1.全称: JavaScript XML
  • 2.react定义的一种类似于XML的JS扩展语法: React.createElement(component, props, …children)方法的语法糖
  • 3.作用: 用来简化创建虚拟DOM
  • 4.标签名任意: HTML标签或其它标签
  • 5.标签属性任意: HTML标签属性或其它
  • 6.基本语法规则:
    1. 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    2. 遇到以 { 开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含
  • 7.babel.js的作用
    1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    2. 只要用了JSX,都要加上type=”text/babel”, 声明需要babel来处理

渲染虚拟DOM(元素)

  • 1.语法: ReactDOM.render(virtualDOM, containerDOM)
  • 2.作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
  • 3.参数说明:
    1. 参数一: 纯js或jsx创建的虚拟dom对象
    2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

1.2.模块与组件、模块化与组件化的理解

模块和模块化

  • 1.理解:向外提供特定功能的js程序, 一般就是一个js文件
  • 2.为什么要拆成模块?随着业务逻辑增加,代码越来越多且复杂。
  • 3.作用 —— 复用js, 简化js的编写, 提高js运行效率
  • 4.当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

组件和组件化

  • 1.理解:用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
  • 2.为什么要用组件? 一个界面的功能更复杂
  • 3.作用 —— 复用编码, 简化项目编码, 提高运行效率
  • 4.当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

第2章:React面向组件编程

2.1 组件三大核心属性之 —— state

  • 1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
  • 2.组件被称为”状态机”, 通过更新组件的state来更新对应的页面显示(重新渲染组件)

强烈注意

  • 1.组件中render方法中的this为组件实例对象
  • 2.组件自定义的方法中this为undefined,如何解决?
    1. 强制绑定this: 通过函数对象的bind()
    2. 箭头函数
  • 3.状态数据,不能直接修改或更新

2.2 组件三大核心属性之 —— props

  • 1.每个组件对象都会有props(properties的简写)属性
  • 2.组件标签的所有属性都保存在props中
  • 3.通过标签属性从组件外向组件内传递变化的数据
  • 4.注意 —— 组件内部无法修改props数据

对props中的属性值进行类型限制和必要性限制

// 第一种方式(React v15.5 开始已弃用)
Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

// 第二种方式 —— 使用prop-types库进限制(需要引入prop-types库)
class Person extends React.Component{
        render(){
                const {name,age,sex} = this.props
                return (
                        <ul>
                                <li>姓名:{name}</li>
                                <li>性别:{sex}</li>
                                <li>年龄:{age+1}</li>
                        </ul>
                )
        }
}
//对标签属性进行类型、必要性的限制
Person.propTypes = {
        name:PropTypes.string.isRequired, //限制name必传,且为字符串
        sex:PropTypes.string,//限制sex为字符串
        age:PropTypes.number,//限制age为数值
}
//指定默认标签属性值     
Person.defaultProps = {
        sex:'男',//sex默认值为男
        age:18 //age默认值为18
}
ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('root'))

2.3 组件三大核心属性之 —— refs与事件处理

ref —— 组件内的标签可以定义ref属性来标识自己:

001.gif

  • 1.字符串形式的ref:
<input ref="input1"/>
  • 2.回调形式的ref:
<input ref={(val)=>{this.input1 = val}}/>
  • 3.createRef创建ref容器:
myRef = React.createRef() 
<input ref={this.myRef}/>

事件处理

  • 1.通过onXxx属性(例如:onClick)指定事件处理函数(注意大小写)
      1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
      1. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
  • 2.通过event.target得到发生事件的DOM元素对象

受控组件和非受控组件

React 中的受控组件和非受控组件都是针对于表单数据而言的。React 推荐使用受控组件来处理表单数据。
在受控组件中,表单数据由React组件的state管理。在非受控组件中,表单数据交由DOM节点处理,可以使用ref来从 DOM中获取表单数据。

// 受控组件 —— React 的 state 是表单的数据源,并且渲染表单的 React 组件还控制着用户输入过程中表单发生的操作
function Form() {
  const [name, setName] = useState('');
  const onInputChange = event => setName(event.target.value);
  const onFormSubmit = event => {
    console.log('提交的数据 => ', name);
    event.preventDefault();
  };
  
  return (
    <form onSubmit={onFormSubmit}>
      <label>
        名字:
        <input type='text' value={name} onChange={onInputChange} />
      </label>
      <input type='submit' value='提交'/>
    </form>
  )
}
// 非受控组件 —— 表单元素自己维护 state。可以使用 ref 获取表单数据
function Form() {
  const inputElement = useRef(null);
  const onFormSubmit = event => {
    console.log('提交的数据 => ', inputElement.current.value);
    event.preventDefault();
  };

  return (
    <form onSubmit={onFormSubmit}>
      <label>
        名字:
        <input type='text' ref={inputElement} />
      </label>
      <input type='submit' value='提交'/>
    </form>
  )
}

2.4 组件的生命周期

理解 React 的生命周期

  1. 组件从创建到死亡它会经历一些特定的阶段。
  2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  3. 我们在定义组件时,会在特定的生命周期回调函数中,做特定的工作。

生命周期流程图(旧)

image.png

    1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
    • 1.constructor()
    • 2.componentWillMount()
    • 3.render()
    • 4.componentDidMount()
    1. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    • 1.shouldComponentUpdate()
    • 2.componentWillUpdate()
    • 3.render()
    • 4.componentDidUpdate()
    1. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    • 1.componentWillUnmount()

生命周期流程图(新)

image.png

    1. 初始化阶段: 由ReactDOM.render()触发—初次渲染
    • 1.constructor()
    • 2.getDerivedStateFromProps
    • 3.render()
    • 4.componentDidMount()
    1. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
    • 1.getDerivedStateFromProps
    • 2.shouldComponentUpdate()
    • 3.render()
    • 4.getSnapshotBeforeUpdate
    • 5.componentDidUpdate()
    1. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
    • 1.componentWillUnmount()

2.5 虚拟DOM与DOM Diffing算法

image.png

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容