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

前言

本文作为本人学习总结之用，同时分享给大家，适合入门的react小白
因为个人技术有限，如果有发现错误或存在疑问之处，欢迎指出或指点！不胜感谢！

React基本介绍

React介绍

介绍描述

中文官网: react.docschina.org/

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

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

React特点

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

高效原因：

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

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

React的基本使用

创建虚拟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

React提供了一些API来创建一种 “特别” 的一般js对象

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

虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作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

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

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

小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM元素

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

React面向组件编程

基本理解和使用

注意

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

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

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

函数组件和类式组件

函数组件：

<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组件三大核心属性

理解

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

强烈注意

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

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数据

编码操作

内部读取某个属性值: this.props.name
对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. 
}

扩展属性: 将对象的所有属性通过props传递
默认属性值
组件类的构造函数

//创建组件
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>
    )
  }
}

受控组件和非受控组件

包含表单的组件分类:

受控组件 实际上是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>
        )
    }
}

非受控组件不太建议使用 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'))

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

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

即将废弃的勾子

componentWillMount
componentWillReceiveProps
componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

虚拟DOM与DOM Diffing算法

图片3.png

关于diff算法的问题:

1). react/vue中的key有什么作用？（key的内部原理是什么？)
2). 为什么遍历列表时，key最好不要用index?

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

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

若虚拟DOM中内容没变, 直接使用之前的真实DOM\
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
b. 旧虚拟DOM中未找到与新虚拟DOM相同的key根据数据创建新的真实DOM，随后渲染到到页面
用index作为key可能会引发的问题： a.若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
b.如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
c.注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
开发中如何选择key? 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
如果确定只是简单的展示数据，用index也是可以的。

React基础笔记（一）

前言