React基础笔记（一）

时间  2021-08-12
标签 javascript html vue java react ajax 算法 编程 数组 浏览器 栏目 React 繁體版
原文   原文链接

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战javascript

前言

本文做为本人学习总结之用，同时分享给你们，适合入门的react小白
由于我的技术有限，若是有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！html

React基本介绍

React介绍

介绍描述

中文官网: react.docschina.org/vue

英文官网: https://reactjs.org/java

  • 用于动态构建用户界面的 JavaScript 库(只关注于视图)
  • 由Facebook开源

React特色

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

高效缘由：react

1. 使用虚拟(virtual)DOM, 不老是直接操做页面真实DOM。ajax

2. DOM Diffing算法, 最小化页面重绘算法

React的基本使用

相关JS库

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

建立虚拟DOM的两种方式

  • 纯JS方式（通常不使用）
<script type="text/javascript" > 
    //1.建立虚拟DOM
    const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
复制代码
  • JSX方式
<script type="text/babel" > /* 此处必定要写babel */
    //1.建立虚拟DOM
    const VDOM = (  /* 此处必定不要写引号，由于不是字符串 */
        <h1 id="title"> <span>Hello,React</span> </h1>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
复制代码

虚拟DOM与真实DOM

  1. React提供了一些API来建立一种 “特别” 的通常js对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')
建立的就是一个简单的虚拟DOM对象编程

  1. 虚拟DOM对象最终都会被React转换为真实的DOM
  2. 咱们编码时基本只须要操做react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界
//1.建立虚拟DOM
  const VDOM = ( 
    <h1 id="title"> <span>Hello,React</span> </h1>
  )
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM);   //虚拟DOM Object:{$$typeof: Symbol(react.element), type: "h1", key: null, ref: null, props: {…}, …}
console.log('真实DOM',TDOM);  //真实DOM <div id='demo'></div>
debugger;
console.log(typeof VDOM);  //object
console.log(VDOM instanceof Object); //true
复制代码

关于虚拟DOM：
1.本质是Object类型的对象（通常对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，由于虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈如今页面上。数组

React JSX

JSX

  1. 全称:  JavaScript XML
  2. react定义的一种相似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, ...children)方法的语法糖
  3. 做用: 用来简化建立虚拟DOM
    • 写法：var ele =  <h1>Hello JSX!</h1>
    • 注意1：它不是字符串, 也不是HTML/XML标签
    • 注意2：它最终产生的就是一个JS对象
  4. 标签名任意: HTML标签或其它标签
  5. 标签属性任意: HTML标签属性或其它
  6. 基本语法规则

1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母浏览器

  • 小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
  • 字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
  1.  babel.js的做用
  • 浏览器不能直接解析JSX代码, 须要babel转译为纯JS的代码才能运行
  • 只要用了JSX，都要加上type="text/babel", 声明须要babel来处理

渲染虚拟DOM元素

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

React面向组件编程

基本理解和使用

注意

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

渲染类组件标签的基本流程

  1. React内部会建立组件实例对象
  2. 调用render()获得虚拟DOM, 并解析为真实DOM
  3. 插入到指定的页面元素内部

函数组件和类式组件

函数组件：

<script type="text/babel">
    //1.建立函数式组件
    function MyComponent(){
        console.log(this);  //此处的this是undefined，由于babel编译后开启了严格模式
        return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    /* 执行了ReactDOM.render(<MyComponent/>.......以后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈如今页面中。 */
</script>
复制代码

类式组件：        

<script type="text/babel">
    //1.建立类式组件
    class MyComponent extends React.Component {
        render(){
            //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。
            //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。
            console.log('render中的this:',this);
            //输出为 render中的this: MyComponent {props: {…}, context: {…}, refs: {…}, updater: {…}, _reactInternalFiber: FiberNode, …}
            return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
        }
    }
    //2.渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))
    /* 执行了ReactDOM.render(<MyComponent/>.......以后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用类定义的，随后new出来该类的实例，并经过该实例调用到原型上的render方法。 3.将render返回的虚拟DOM转为真实DOM，随后呈如今页面中。 */
</script>
复制代码

state组件三大核心属性

理解

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

强烈注意

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

state基本使用

//1.建立组件
class Weather extends React.Component{
    //构造器调用几回？ ———— 1次
    constructor(props){
        console.log('constructor');
        super(props)
        //初始化状态
        this.state = {isHot:false,wind:'微风',stat:{}}
        //解决changeWeather中this指向问题
        this.changeWeather = this.changeWeather.bind(this)
    }

    //render调用几回？ ———— 1+n次 1是初始化的那次 n是状态更新的次数
    render(){
        console.log('render');
        //读取状态
        const {isHot,wind} = this.state
        return <h1 onClick={this.changeWeather}>今每天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
    }

    //changeWeather调用几回？ ———— 点几回调几回
    changeWeather(){
        //changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
        //因为changeWeather是做为onClick的回调，因此不是经过实例调用的，是直接调用
        //类中的方法默认开启了局部的严格模式，因此changeWeather中的this为undefined

        console.log('changeWeather');
        //获取原来的isHot值
        const isHot = this.state.isHot
        //严重注意：状态必须经过setState进行更新,且更新是一种合并，不是替换。
        this.setState({isHot:!isHot})
        console.log(this);

        //严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
        //this.state.isHot = !isHot //这是错误的写法
    }
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
复制代码

state简写方式：简写只是把constructor去掉 初始化更加方便

class Weather extends React.Component{
    //初始化状态
    state = {isHot:false,wind:'微风'}
    render(){
        const {isHot,wind} = this.state
        return <h1 onClick={this.changeWeather}>今每天气很{isHot ? '炎热' : '凉爽'}，{wind}</h1>
    }
    //自定义方法————要用赋值语句的形式+箭头函数
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
复制代码

props组件三大核心属性

理解

1. 每一个组件对象都会有props(properties的简写)属性
2. 组件标签的全部属性都保存在props中

做用

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

编码操做

  1. 内部读取某个属性值: this.props.name
  2. 对props中的属性值进行类型限制和必要性限制
//第一种方式（React v15.5 开始已弃用）：
Person.propTypes = {
    name: React.PropTypes.string.isRequired,
    age: React.PropTypes.number
}
//第二种方式（新）：使用prop-types库进限制（须要引入prop-types库）:
Person.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number. 
}
复制代码
  1. 扩展属性: 将对象的全部属性经过props传递
  2. 默认属性值
  3. 组件类的构造函数
//建立组件
class Person extends React.Component{
//5.组件类的构造函数
    constructor(props){
        //构造器是否接收props，是否传递给super，取决于：是否但愿在构造器中经过this访问props
        // console.log(props);
        super(props)
        console.log('constructor',this.props);
    }

//2对标签属性进行类型、必要性的限制
    static propTypes = {
        name:PropTypes.string.isRequired, //限制name必传，且为字符串
        sex:PropTypes.string,//限制sex为字符串
        age:PropTypes.number,//限制age为数值
    }

//4指定默认标签属性值
    static defaultProps = {
        sex:'男',//sex默认值为男
        age:18 //age默认值为18
    }
            
    render(){
//1内部读取某个属性值
        const {name,age,sex} = this.props
        //props是只读的
        //this.props.name = 'jack' //此行代码会报错，由于props是只读的
        return (
            <ul> <li>姓名：{name}</li> <li>性别：{sex}</li> <li>年龄：{age+1}</li> </ul>
        )
    }
}

//3扩展属性
//渲染组件到页面
ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
复制代码

函数式组件使用 props

//建立组件
function Person (props){
    const {name,age,sex} = props
    return (
            <ul> <li>姓名：{name}</li> <li>性别：{sex}</li> <li>年龄：{age}</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="jerry"/>,document.getElementById('test1'))
复制代码

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

理解

组件内的标签能够定义ref属性来标识本身不太建议过多使用React准备废弃

编码

1. 字符串形式的ref
2. 回调形式的ref
3. createRef建立ref容器

//字符串形式的ref
<input ref="input1" type="text" />
const {input1} = this.refs  //直接调用

//回调形式的ref
<input ref={c => this.input1 = c } type="text"/>
const {input1} = this   //调用赋值

//函数方式调用
    <input ref={this.saveInput} type="text"/>
  saveInput = (c)=>{
    this.input1 = c;
    console.log('@',c);
  }
  
  //createRef建立ref容器·
  //React.createRef调用后能够返回一个容器，该容器能够存储被 ref所标识的节点,该容器是"专人专用"的
    myRef = React.createRef()
    <input ref={this.myRef} type="text"/>
复制代码

事件处理

1. 经过onXxx属性指定事件处理函数(注意大小写)\

  • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件———————为了更好的兼容性
  • React中的事件是经过事件委托方式处理的(委托给组件最外层的元素)———— 为了的高效

2. 经过event.target获得发生事件的DOM元素对象 —————————不要过分使用ref

//事件处理
    showData = (event)=>{
      console.log(event.target);
      alert(this.myRef.current.value);
    }
    <button onClick={this.showData}>点我提示左侧的数据</button>

//在父子组件中使用
export default class SliderList extends Component {
  sliderRef = React.createRef();
  componentDidMount(){
    this.sliderRef.current.doSlider();   //在父组件中调用
  }
  render() {
      return (
          <div className = 'slider-container'> <Slider ref={this.sliderRef}/> </div>
      );
  }
}
//子组件定义方法
export default class Slider extends Component {
  doSlider() {
    console.log(111111)
  }
  render() {
   return (
      <div>Slider</div>
    )
  }
}
复制代码

受控组件和非受控组件

包含表单的组件分类:

  1. 受控组件 其实是Vue的双向绑定
class Login extends React.Component{
    //初始化状态
    state = {
        username:'', //用户名
        password:'' //密码
    }

    //保存用户名到状态中
    saveUsername = (event)=>{
        this.setState({username:event.target.value})
    }

    //保存密码到状态中
    savePassword = (event)=>{
        this.setState({password:event.target.value})
    }

    //表单提交的回调
    handleSubmit = (event)=>{
        event.preventDefault() //阻止表单提交
        const {username,password} = this.state
        alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
    }

    render(){
        return(
            <form onSubmit={this.handleSubmit}> 用户名：<input onChange={this.saveUsername} type="text" name="username"/> 密码：<input onChange={this.savePassword} type="password" name="password"/> <button>登陆</button> </form>
        )
    }
}
复制代码
  1. 非受控组件不太建议使用 ref使用较多
class Login extends React.Component{
    handleSubmit = (event)=>{
        event.preventDefault() //阻止表单提交
        const {username,password} = this
        alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
    }
    render(){
        return(
            <form onSubmit={this.handleSubmit}> 用户名：<input ref={c => this.username = c} type="text" name="username"/> 密码：<input ref={c => this.password = c} type="password" name="password"/> <button>登陆</button> </form>
        )
    }
}
复制代码

组件的生命周期

理解

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

生命周期流程图(旧)

1.初始化阶段:由ReactDOM.render()触发---初次渲染

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()

2.更新阶段:由组件内部this.setSate()或父组件从新render触发

  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()

3.卸载组件:由ReactDOM.unmountComponentAtNode()触发

  • componentWillUnmount()

图片1.png

生命周期流程图(新)

1.初始化阶段:由ReactDOM.render()触发---初次渲染

  • constructor()
  • getDerivedStateFromProps
  • render()
  • componentDidMount() =====> 经常使用 通常在这个钩子中作一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2.更新阶段:由组件内部this.setSate()或父组件从新render触发

  • getDerivedStateFromProps
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate
  • componentDidUpdate()

3.卸载组件:由ReactDOM.unmountComponentAtNode()触发

componentWillUnmount()====> 经常使用
通常在这个钩子中作一些收尾的事，例如：关闭定时器、取消订阅消息

图片2.png

强制刷新：this.forceUpdate() ————跟vue强制刷新一致

class Count extends React.Component{
    //构造器
    constructor(props){
        console.log('Count---constructor');
        super(props)
        //初始化状态
        this.state = {count:0}
    }

    //加1按钮的回调
    add = ()=>{
        //获取原状态
        const {count} = this.state
        //更新状态
        this.setState({count:count+1})
    }

    //卸载组件按钮的回调
    death = ()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    //强制更新按钮的回调
    force = ()=>{
        this.forceUpdate()
    }

    //若state的值在任什么时候候都取决于props，那么可使用getDerivedStateFromProps
    static getDerivedStateFromProps(props,state){
        console.log('getDerivedStateFromProps',props,state);
        return null
    }

    //在更新以前获取快照
    getSnapshotBeforeUpdate(){
        console.log('getSnapshotBeforeUpdate');
        return 'atguigu'
    }

    //组件挂载完毕的钩子
    componentDidMount(){
        console.log('Count---componentDidMount');
    }

    //组件将要卸载的钩子
    componentWillUnmount(){
        console.log('Count---componentWillUnmount');
    }

    //控制组件更新的“阀门”
    shouldComponentUpdate(){
        console.log('Count---shouldComponentUpdate');
        return true
    }

    //组件更新完毕的钩子
    componentDidUpdate(preProps,preState,snapshotValue){
        console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
    }

    render(){
        console.log('Count---render');
        const {count} = this.state
        return(
            <div> <h2>当前求和为：{count}</h2> <button onClick={this.add}>点我+1</button> <button onClick={this.death}>卸载组件</button> <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button> </div>
        )
    }
}

//渲染组件
ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
复制代码

重要的勾子(主要使用的函数)

  1. render：初始化渲染或更新渲染调用
  2. componentDidMount：开启监听, 发送ajax请求
  3. componentWillUnmount：作一些收尾工做, 如: 清理定时器

即将废弃的勾子

  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate

如今使用会出现警告，下一个大版本须要加上UNSAFE_前缀才能使用，之后可能会被完全废弃，不建议使用。

虚拟DOM与DOM Diffing算法

图片3.png

关于diff算法的问题:

1). react/vue中的key有什么做用？（key的内部原理是什么？)
2). 为何遍历列表时，key最好不要用index?
复制代码
  1. 虚拟DOM中key的做用:

详细的说:当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则以下:

a. 旧虚拟DOM中找到了与新虚拟DOM相同的key:

  1. 若虚拟DOM中内容没变, 直接使用以前的真实DOM\
  2. 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中以前的真实DOM\

b. 旧虚拟DOM中未找到与新虚拟DOM相同的key根据数据建立新的真实DOM，随后渲染到到页面

  1. 用index做为key可能会引起的问题：

a.若对数据进行：逆序添加、逆序删除等破坏顺序操做:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
b.若是结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
c.注意！若是不存在对数据的逆序添加、逆序删除等破坏顺序操做，仅用于渲染列表用于展现，使用index做为key是没有问题的。

  1. 开发中如何选择key?

最好使用每条数据的惟一标识做为key, 好比id、手机号、身份证号、学号等惟一值。 若是肯定只是简单的展现数据，用index也是能够的。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程