react学习记录（一）

啦啦啦啦123
111 阅读7分钟

react简介

1、为什么要学？

  • 原生js操作DOM繁琐、效率低
  • 使用js直接操作DOM，浏览器会进行大量的重绘重排
  • 原生js没有组件化编码方案，代码复用率降低 2、React的特点
  • 采用组件化模式，声明式编码，提高开发效率及组件复用率
  • 在react native中可以使用react语法进行移动端开发
  • 使用虚拟DOM+优秀的diffing算法，尽量减少与真实dom的交互 3、需要掌握的js基础知识
  • 判断this的指向
  • class
  • ES6语法规范
  • npm包管理器
  • 原型、原型链
  • 数组常用方法
  • 模块化

react基础

jsx语法

  1. 定义虚拟DOM时，不要写引号
  2. 标签中混入js表达式的时候要用{}
  3. 样式的类名指定不要用class，要用className
  4. 内联样式要用style={{ key: value }}的形式去写
  5. 虚拟DOM只有一个跟标签
  6. 标签必须闭合
  7. 标签首字母
  • 若小写字母开头，则将该标签转为html中同名标签，若html中无该比标签对应的同名标签，则报错。
  • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
<span style={{ color: 'white', fontSize: '20px' }}>
// 第一个花括号是在这里面写js表达式，第二个花括号代表的是这里面写的是js里面的对象

练习：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsx小练习</title>
</head>
<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react.dom 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    /*
      区分js语句（代码）和js表达式：
      1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
        下面这些是表达式：
          a
          a + b
          demo(1)
          arr.map()
          function test() {}
      2.语句(代码)
        下面这些都是语句或代码：
          if () {}
          for () {}
          switch() { case:xxx }
    */
    const data = ['angulr', 'react', 'vue']
    // 1、创建虚拟DOM
    const VDOM = (
      <div>
        <h1>前端js框架</h1>
        <ul>
          // 只能写 js表达式
          {
            data.map((item, index) => {
              return <li key={index}>{ item }</li>
            })
          }
        </ul>
      </div>
    )
  </script>
</body>
</html>

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

  1. 模块
  • 理解：向外提供特定功能的js程序，一般就是一个js文件
  • 原因：随着业务逻辑增加，代码越来越多且复杂
  • 作用：复用js，简化js的编写，提高js的运行效率
  1. 组件
  • 理解：用来实现局部功能效果的代码和资源的集合等
  • 原因：一个界面的功能更复杂
  • 作用：复用编码，简化项目代码，提高运行效率
  1. 模块化 当应用的js都以模块来编写，这个应用就是一个模块化的应用
  2. 组件化
    当应用是以多组件的方式实现，这个应用就是一个组件化的应用

react面向组件编程

  1. 函数式组件
<!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react.dom 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    // 1.创建函数式组件
    function Demo() {
      console.log(this) // 此处的this是undefined，因为babel编译后开启了严格模式
      return <h2>我是用函数定义的组件（适用于【简单组件】的定义）</h2>
    }
    // 渲染组件到页面
    ReactDOM.render(<Demo />, document.getElementById('test'))
    /*
      ReactDOM.render(<Demo />, document.getElementById('test'))之后，发生了什么？
      1、react解析组件标签，找到了Demo组件
      2、发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实的DOM，随后呈现在页面上
    */
  </script>
  1. 类组件
  1. 类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写
  2. 如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的
  3. 类中所定义的方法，都是放在了类的原型对象上，供实例去使用
<!-- 准备好一个容器 -->
  <div id="test"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react.dom 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">
    // 1.创建类组件
    class MyComponent extends React.Component {
      // render是放在哪里的---MyComponent的原型对象上，供实例对象使用 
      // render中的this是谁---MyComponent的实例对象/MyComponent组件实例对象
      render() {
        return <h2>我是类定义的组件（适用于【复杂组件】的定义）</h2>
      }
    }
    // 2.渲染组件到页面
    ReactDOM.render(<MyComponent />, document.getElementById('test'))
    /*
      执行了ReactDOM.render(<MyComponent />, document.getElementById('test'))之后，发生了什么？
          1、React解析组件标签，找到了MyComponent组件
          2、发现组件是使用类定义的，随着new出来该类的实例，并通过实例调用原型上的render方法
          3、将render返回的虚拟DOM转为真是的DOM，随后呈现在页面中

    */
  </script>

组件实例的三大核心属性--state、props、refs

state

state是组件对象最重要的属性，值是对象，可以包含多个key-value的组合
组件被称为“状态机”，通过更新组件的state来更新对应的页面展示（重新渲染组件）。

注意的点：

  • 组件中的render方法中的this为组件实例对象

  • 组件自定义方法中的this为undefined，如何解决？
    强制绑定this：通过函数对象的bind()
    箭头函数

  • 状态数据，不能直接修改或更新 image.png

props

展开运算符

let arr1 = [1,3,5,7,9]
let arr2 = [2,4,6,8,10]
console.log(...arr1) // 展开一个数组
let arr3 = [...arr1, ...arr2] // 连接数组
console.log(arr3)

// 数组求和
function sum(...numbers) {
  return numbers.reduce((preValue, currentValue) => {
    return preValue + currentValue
  })
}
console.log(sum(1,2,3,4))

let person = {name: 'Tom', age: 18}
// console.log(...person) // 报错  --- 展开运算符不能展开对象
let person = {...person} // 字面量的形式复制一个对象

image.png

image.png 注意：babel+react让展开运算符展开一个对象，但是不能随意使用---仅适用于标签属性的传递

// 复制对象的同时修改属性值---合并
let person3 = {...person, name: 'jack', address: '地球'}

props的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 准备好一个容器 -->
  <div id="test1"></div>
  <div id="test2"></div>
  <div id="test3"></div>
  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react.dom 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <!-- 引入prop-types，用于对组件标签属性进行限制 -->
  <script type="text/javascript" src="../js/prop-types.js"></script>

  <script type="text/babel">
    // 1.创建组件
  class Person extends React.Component {

      render() {
        const { name, age, sex} = this.props
        /*
          props是只读的
          this.props.name = 'jack' // 此行代码会报错，因为props是只读的
        */ 
        return (
          <ul>
            <li>姓名：{ name }</li>
            <li>年龄：{ age + 1 }</li>
            <li>性别：{ sex }</li>
          </ul>
        )
      }
    }

    // 对标签属性进行类型、必要性的限制
    Person.propTypes = {
      // name: React.PropTypes.string.isRequired, // 15.xx版本时还存在  16.xx版本之后弃用
      name: PropTypes.string.isRequired,
      age: PropTypes.number,
      sex: PropTypes.string,
      speak: PropTypes.func // 限制为函数， 此处写func是为了避免和原生JS中的关键字function产生冲突
    }
    // 指定标签属性默认值
    Person.defaultProps = {
      sex: '未知',
      age: 18
    }
    // 2.渲染组件到页面
    ReactDOM.render(<Person name="jerry" speak={speak} />, document.getElementById('test1'))
    ReactDOM.render(<Person name="tom" age={18} sex='女' />, document.getElementById('test2'))

    const p = { name: '老刘', age: 18, sex: '女' }
    ReactDOM.render(<Person {...p} />, document.getElementById('test3'))

    function speak() {
      console.log('说好了')
    }

    // 数组求和
    // function sum(...numbers) {
    //   return numbers.reduce((preValue, currentValue) => {
    //     return preValue + currentValue
    //   })
    // }
    // console.log(sum(1,2,3,4))
    // babel+react让展开运算符展开一个对象，但是不能随意使用---仅适用于标签属性的传递
  </script>
</body>
</html>

props的简写

将外部定义的属性放在Person的内部，并用static进行修饰

class Person extends React.Component {

  // 对标签属性进行类型、必要性的限制
  static propTypes = {
    // name: React.PropTypes.string.isRequired, // 15.xx版本时还存在  16.xx版本之后弃用
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
    speak: PropTypes.func // 限制为函数， 此处写func是为了避免和原生JS中的关键字function产生冲突
  }
  // 指定标签属性默认值
  static defaultProps = {
    sex: '未知',
    age: 18
  }

  render() {
    const { name, age, sex} = this.props
    /*
      props是只读的
      this.props.name = 'jack' // 此行代码会报错，因为props是只读的
    */ 
    return (
      <ul>
        <li>姓名：{ name }</li>
        <li>年龄：{ age + 1 }</li>
        <li>性别：{ sex }</li>
      </ul>
    )
  }
}

类式组件构造器与props：构造器是否接收props，是否传递props，取决于：是否希望在构造器中通过this访问props

在React组件挂载之前，会调用它的构造函数，在为React.Component子类实现构造函数时，应在其他语句之前调用super(props)。否则this.props在构造函数中可能会出现未定义的bug。

constructor(props) {
    super()
    console.log('constructor', this.props) // undefined
}


constructor() {
    super()
    console.log('constructor', this.props) // undefined
}

props的作用

1、每个组件对象都会有props(properties的简写)属性，组件标签的所有属性都报错在props中。
2、通过标签属性从组件外向组件内传递变化的数据。
注意：组件内部不要修改props的数据

函数式组件与props

function Person (props) {
  const { name, age, sex} = this.props
  return (
    <ul>
      <li>姓名：{ name }</li>
      <li>年龄：{ age + 1 }</li>
      <li>性别：{ sex }</li>
    </ul>
  )
}
Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  sex: PropTypes.string,
  speak: PropTypes.func
}
Person.defaultProps = {
  sex: '未知', 
  age: 18
}
// 2.渲染组件到页面
ReactDOM.render(<Person name="jerry" age={18} sex="男" />, document.getElementById('test1'))

refs

字符串形式的ref

// 创建组件
class Demo extends React.Component {
  // 展示左侧输入的数据
  showData = () => {
    const { input1 } = this.refs
    alert(input1.value)
  }
  // 展示右侧输入的数据
  showData2 = () => {
    const { input2 } = this.refs
    alert(input2.value)
  }
  render() {
    return (
      <div>
        <input ref="input1" type="text" placeholder="点击按钮提示数据" />&nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />  
      </div>
    )
  }
}
// 渲染组件到页面
ReactDOM.render(<Demo  />, document.getElementById('test'))

回调函数形式的ref

// 创建组件
class Demo extends React.Component {
  // 展示左侧输入的数据
  showData = () => {
    const { input1 } = this
    alert(input1.value)
  }
  // 展示右侧输入的数据
  showData2 = () => {
    const { input2 } = this
    alert(input2.value)
  }
  render() {
    return (
      <div>
        <input ref={(currentNode) => { this.input1 = currentNode }} type="text" placeholder="点击按钮提示数据" />&nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        <input ref={currentNode => this.input2 = currentNode } onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />  
      </div>
    )
  }
}
// 渲染组件到页面
ReactDOM.render(<Demo  />, document.getElementById('test'))

回调函数形式ref的调用次数问题

如果ref回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数null，然后第二次会传入参数DOM元素。这是因为在每次渲染时会创建一个新的函数实例，所以React清空旧的ref并且设置新的。通过将ref的回调函数定义成class的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。在实际开发中大多使用内联写法

class Demo extends React.Component {
  state = { isHot: true }
  // 展示左侧输入的数据
  showData = () => {
    const { input1 } = this
    alert(input1.value)
  }
  changeWether = () => {
    const { isHot } = this.state
    this.setState({isHot: !isHot})
  }
  // 绑定函数形式
  saveInput = (c) => {
    this.input1 = c;
    console.log('@', c);
  }
  render() {
    const {isHot} = this.state.isHot
    return (
      <div>
        <h2>今天天气很{isHot === true ? '炎热' : '凉爽'}</h2>
        <input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" /><br/>
        {/* 内联函数形式 */}
        {/* <input ref={(currentNode) => { this.input1 = currentNode;console.log('!',currentNode) }} type="text" placeholder="点击按钮提示数据" /><br/> */}
        <button onClick={this.showData}>点我提示输入的数据</button>&nbsp;
        <button onClick={this.changeWether}>点我切换天气</button>
      </div>
    )
  }
}
// 渲染组件到页面
ReactDOM.render(<Demo  />, document.getElementById('test'))

createRef的使用

class Demo extends React.Component {
  /*
    React.createRef() 调用后可以返回一个容器，该容器可以存储被ref所标识的节点
    该容器是“专人专用”的---只能存一个
  */
  myRef = React.createRef()
  myRef2 = React.createRef()
  // 展示左侧输入的数据
  showData = () => {
    console.log(this.myRef)
    alert(this.myRef.current.value)
  }
  // 展示右侧输入的数据
  showData2 = () => {
    alert(this.myRef2.current.value)
  }
  render() {
    return (
      <div>
        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />  
      </div>
    )
  }
}
// 渲染组件到页面
ReactDOM.render(<Demo  />, document.getElementById('test'))

事件处理

// 创建组件
class Demo extends React.Component {
  /*
      1、通过onXxx属性指定事件处理函数（注意大小写）
          a.React使用的是自定义（合成）事件，而不是使用的原生DOM事件---为了更好的兼容性
          b.React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）---为了高效
      2、通过event.target得到发生事件的DOM元素对象---不要过度的使用ref
  */
  // 创建ref容器
  myRef = React.createRef()
  myRef2 = React.createRef()

  // 展示左侧输入的数据
  showData = () => {
    console.log(this.myRef)
    alert(this.myRef.current.value)
  }

  // 展示右侧输入的数据
  showData2 = (event) => {
    alert(event.target.value)
  }

  render() {
    return (
      <div>
        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />&nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
        <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />  
      </div>
    )
  }
}
// 渲染组件到页面
ReactDOM.render(<Demo  />, document.getElementById('test'))
avatar
文章
阅读
粉丝