React教程详解一（props、state、refs、生命周期）

news2025/1/9 2:17:58

文章略长，耐心读完，受益匪浅哦~

 目录

前言

简介

JSX

面向组件编程

state

props

refs

组件生命周期

前言

简介

React框架由Facebook开发，和Vue框架一样，都是用于构建用户界面的JavaScript库；

它有如下三个特点：

  1. 采用组件化模式，声明式编程，提高开发效率及组件复用率
  2. 在React Native中可以使用React语法进行移动端开发
  3. 使用虚拟DOM和优秀的Diffing算法，尽量减少与真实DOM的交互；

如下是引入react的简单尝试：

// test.html
<body>
  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
  <!-- 引入react-dom库，用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel，用于将jsx解析为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <div id="test"></div>
  <!-- 记住这里的类型是text/babel，下面写的是jsx语法 -->
  <script type="text/babel">
    // 创建虚拟DOM
    const VDOM = (
      <div>
        <h1>React初尝试</h1>
      </div>
    )
    ReactDOM.render(VDOM, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>
</body>

JSX

JSX（JavaScript XML）是react定义的一种类似于XML的js扩展语法，用于简化创建虚拟DOM的过程；下面列出一些简单语法：

  • 定义虚拟DOM时，不要写引号；
  • 标签中混入JS表达式时要用{ };
  • 样式的类名指定要用className;
  • 内联样式，要用style={{key: value;...;}}的方式，其中最外层{}表示是js表达式，内存{}表示个对象；
  • 样式的名称要用小驼峰命名，如fontSize
  • 只有一个根标签
  • 标签必须闭合
  • 标签首字母若为小写，则会将标签转为html中同名标签；若首字母为大写，则意味着是个组件

在使用中，利用babel将jsx编译成js使用；

面向组件编程

在react中，组件分为函数式组件和类式组件；

  • 函数式组件

函数式组件即为在创建虚拟DOM时使用函数定义；

// test.html
<body>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <div id="test"></div>
  <script type="text/babel">
    // 函数式组件，名为test组件
    function Test() {
      console.log(this) // undefined，babel编译后开启了严格模式
      // 返回虚拟DOM
      return (
      <div>
        <h1>React初尝试</h1>
      </div>
    )
    }
    ReactDOM.render(<Test/>, document.getElementById('test')) // 渲染test组件到页面
  
  </script>
</body>

 执行ReactDOM.render之后，发生了什么？

  1. React解析组件标签，找到Test组件
  2. 发现Test组件是用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM,随后渲染到页面上

在无hook之前，函数式组件中只有props这一种属性；

  • 类式组件

类式组件即为在创建虚拟DOM时使用类定义；

// test.html
<body>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <div id="test"></div>
  <script type="text/babel">
    // 创建类式组件，皆要继承于React.Component
    class Demo extends React.Component {
      render() {
        return (
          <div>
            <h1>React初尝试</h1>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>
</body>

其中render函数是定义在Demo组件的原型对象对象上，供实例使用；

执行了ReactDom.render之后发生了什么？

  1. React解析组件标签，找到Demo组件；
  2. 发现组件是类式组件，随后React自动new出来该类的实例，并通过该实例调用原型上的render方法；
  3. 将render方法返回的虚拟DOM转为真实DOM，随后渲染到页面上

类式组件上有三大属性：state，props，refs，下面分别进行介绍；

state

state是由多个key-value组成的对象；通过更新组件的state来更新页面（重新渲染页面）；

state中的数据不能被直接更改，要通过调用setState({key: value})方法来更改；

如下案例为通过改变state中的workDay属性渲染页面显示工作日/休息日：

<body>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <div id="test"></div>
  <script type="text/babel">
    class Demo extends React.Component {
      // 构造函数传参为props，在react中创建类组件时，若写构造函数，则要写super，否则会引起内部bug
      constructor(props) {
        super(props)
        this.state = {workDay: true} // 设置状态
        // 未避免调用changeDay方法时this指向为undefined，因此利用bind将this指向变为实例对象，并将改变this指向后的函数赋值给实例对象的change属性
        this.change = this.changeDay.bind(this)
      }
      render() {
        return (
          <div>
            <h1 onClick={this.change}>今天是{this.state.workDay? '工作日': '休息日'}</h1>
          </div>
        )
      }
      // 该方法原本是给Demo类的实例对象使用的，若作为事件的回调函数，则this指向为undefined（babel为严格模式）
      changeDay() {
        this.setState({workDay: !this.state.workDay}) // 要利用setState方法修改state值
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>
</body>

 如注释所说，若利用类组件方法创建组件，若在类中写了构造函数，则接收props参数的同时要写上super(props)，以防止报错~

在构造函数中可以创建state对象，用以控制页面显示~

在定义事件函数时，若写在类中作为普通函数(则该方法如changeDay，只有作为类的实例对象被调用时，this才有值，即为该实例对象)，作为事件被调用时，此时this为undefined。为解决此问题，可以在构造函数中改变this指向并赋值给另一属性，则此时的this就是类的实例对象，则可以正常被使用~

可以看到Demo实例上有change方法，原型对象上有changeDay方法；

备注：此处看不懂的要去复习ES6哦 JavaScript高级教程（面向对象编程）_迷糊的小小淘的博客-CSDN博客

修改state属性时，不能采用直接赋值的形式，要调用原型对象中的方法setState实现；

当然，state方法还有简单写法（不通过构造函数的方式），因为在继承类中，可省略构造函数constructor，同时若在类中直接写赋值语句，也可以将该属性给每个实例对象使用~所以可以将state直接写在类中，将事件回调函数用属性赋值的方式进行定义；

<script>
    class Person {
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      workerType = '程序媛'
      say = function(){
        console.log(`我的工作是${this.workerType}`)
      }
    }
    let person = new Person('人类', 100)
    console.log(person)
    person.say()
</script>

因此用在此例中如下：

  <script type="text/babel">
    // 创建类式组件，皆要继承于React.Component
    class Demo extends React.Component {
      state = {workDay: true} // 设置状态
      change = () => {
        console.log(this); // 此处一定要写成箭头函数形式, this的指向才为实例对象
        this.setState({workDay: !this.state.workDay})
      }
      render() {
        return (
          <div>
            <h1 onClick={this.change}>今天是{this.state.workDay? '工作日': '休息日'}</h1>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>

关于state的总结如下：

  • state可定义在构造函数中，也可利用赋值语句方法赋值；
  • state不可直接修改，需要调用原型对象中的setState方法；
  • 类组件中的render方法this指向组件实例对象(由react自动创建出来)，组件初始化时会被渲染一次，随后在每次组件更新时被调用；
  • 类组件中的构造函数只会被调用一次；
  • 类组件中普通函数定义改变this指向有两种方法：

                ① 在构造函数中利用bind等方法改变this指向；

                ② 利用箭头函数+函数赋值的方式

props

        prop用于存放组件中的标签属性；props用于存放所有组件中的标签属性；

<script type="text/babel">
    class Demo extends React.Component {
      render() {
        return (
          <ul>
            <li>{this.props.name}</li>
            <li>{this.props.age}</li>
            <li>{this.props.grade}</li>
          </ul>
        )
      }
    }
    ReactDOM.render(<Demo name="小红" age="18" grade="100"/>, document.getElementById('test')) // 渲染虚拟DOM到页面
    const properties = {name: '小明', age: '19', grade: "90"}
    ReactDOM.render(<Demo {...properties}/>, document.getElementById('test1')) // 渲染虚拟DOM到页面
  </script>

复用组件时，利用props可传入不同的标签属性用于展示~

可以限制属性的类型，默认值及是否必输特性，需引入prop-types库；通过给类组件的propTypes和defaultProps进行赋值；

注意：

自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。

<body>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- 引入prop-types库 -->
  <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

  <div id="test"></div>
  <div id="test1"></div>
  <script type="text/babel">
    class Demo extends React.Component {
      render() {
        const {name, age, grade} = this.props
        return (
          <ul>
            <li>{name}</li>
            <li>{age}</li>
            <li>{grade}</li>
          </ul>
        )
      }
    }
    Demo.propTypes = {
      name: PropTypes.string.isRequired, // 设置name为字符串类型且为必输项
      age: PropTypes.number, // 设置age为数字类型
      grade: PropTypes.number // 设置grade为数字类型
    }
    Demo.defaultProps = {
      age: 18, // 设置age默认值为18
      grade: 90 // 设置grade默认值为90
    }
    ReactDOM.render(<Demo name="小红" grade={100}/>, document.getElementById('test')) // 渲染虚拟DOM到页面
    const properties = {name: '小明', age: 19}
    ReactDOM.render(<Demo {...properties}/>, document.getElementById('test1')) // 渲染虚拟DOM到页面
  </script>
</body>

当然，也可以通过static关键字对其进行限制；

<script type="text/babel">
    class Demo extends React.Component {
      static propTypes = {
        name: PropTypes.string.isRequired, // 设置name为字符串类型且为必输项
        age: PropTypes.number, // 设置age为数字类型
        grade: PropTypes.number // 设置grade为数字类型
      }
      static defaultProps = {
        age: 18, // 设置age默认值为18
        grade: 90 // 设置grade默认值为90
      }
      render() {
        const {name, age, grade} = this.props
        return (
          <ul>
            <li>{name}</li>
            <li>{age}</li>
            <li>{grade}</li>
          </ul>
        )
      }
    }
    ReactDOM.render(<Demo name="小红" grade={100}/>, document.getElementById('test')) // 渲染虚拟DOM到页面
    const properties = {name: '小明', age: 19}
    ReactDOM.render(<Demo {...properties}/>, document.getElementById('test1')) // 渲染虚拟DOM到页面
  </script>

函数式组件也可以使用props，通过给函数传参的方式拿到props：

<body>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <!-- 引入prop-types库 -->
  <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

  <div id="test"></div>
  <div id="test1"></div>
  <script type="text/babel">
    function Demo(props) {
      const {name, age, grade} = props
      return <ul>
              <li>{name}</li>
              <li>{age}</li>
              <li>{grade}</li>
            </ul>
    }
    Demo.propTypes = {
      name: PropTypes.string.isRequired, // 设置name为字符串类型且为必输项
      age: PropTypes.number, // 设置age为数字类型
      grade: PropTypes.number // 设置grade为数字类型
    }
    Demo.defaultProps = {
      age: 18, // 设置age默认值为18
      grade: 90 // 设置grade默认值为90
    }
    ReactDOM.render(<Demo name="小红" grade={100}/>, document.getElementById('test')) // 渲染虚拟DOM到页面
    const properties = {name: '小明', age: 19}
    ReactDOM.render(<Demo {...properties}/>, document.getElementById('test1')) // 渲染虚拟DOM到页面
  </script>
</body>

对props的总结如下：

  • 组件标签的所有属性都保存在props中
  • props属性是可读的，不能对其修改（会报错）
  • 可以利用propTypes以及defaultProps对属性类型、是否必输、默认值进行设置

refs

利用refs来表示某标签节点本身，避免操作dom获得标签；有三种形式：

  • 通过字符串赋值方式
<input ref="input">{name}</input>
<script type="text/babel">
    class Demo extends React.Component {
      state = {age: 17}
      addAge = () => {
        const newage  = Number(this.refs.span.innerText) + 1 // 利用this.refs.span可以拿到span节点
        this.setState({age: newage})
      }
      render() {
        return (
          <div>
            <span ref="span">{this.state.age}</span><br/>
            <button onClick={this.addAge}>加一</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo name="小红" age={10}/>, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>

该方法使用简单，但是要少用（有bug，以后可能会被弃用）；

  • 回调函数方式的ref定义

可以在定义ref使用回调函数，传入的参数恰恰是该节点本身；将该参数赋值给其它变量获取即可；

<input ref={ (ele) => {this.input1 = ele} }>{name}</input>
 <script type="text/babel">
    class Demo extends React.Component {
      state = {age: 17}
      addAge = () => {
        const newage  = Number(this.span.innerText) + 1 // 利用this.refs.span可以拿到span节点
        this.setState({age: newage})
      }
      render() {
        return (
          <div>
            <span ref={(ele) => {this.span = ele}}>{this.state.age}</span><br/> 
            <button onClick={this.addAge}>加一</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo name="小红" age={10}/>, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>

利用回调函数方式定义ref时，在更新过程中会被执行两次：一次传入参数为null，第二次才是正常的节点元素，这是因为在每次更新时会创建一个新的函数实例，所以React清空旧的ref并设置新的，当然该差别在开发中没啥影响；见官网说明：Refs and the DOM – React

  • createRef创建ref容器

Refs是使用React.createRef()创建的，并通过ref属性附加到React元素。在构造组件时，通过将Refs分配给实例属性，以便可以在整个组件中引用它们；创建一个标记一个，React.createRef()与标签是一对一关系；使用时须通过.current拿到该节点元素；

 <script type="text/babel">
    class Demo extends React.Component {
      state = {age: 17, age1: 19}
      myRef = React.createRef() // 创建标记加的span节点
      myRef1 = React.createRef() // 创建标记减的span节点
      addAge = () => {
        const newage  = Number(this.myRef.current.innerText) + 1 // 利用this.myRef.current可以拿到span节点
        this.setState({age: newage})
      }
      subAge = () => {
        const newage  = Number(this.myRef1.current.innerText) - 1 // 利用this.myRef1.current可以拿到span节点
        this.setState({age1: newage})
      }
      render() {
        return (
          <div>
            <span ref={this.myRef}>{this.state.age}</span><br/>
            <button onClick={this.addAge}>加一</button><br/>
            <span ref={this.myRef1}>{this.state.age1}</span><br/> 
            <button onClick={this.subAge}>减一</button>
          </div>
        )
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test')) // 渲染虚拟DOM到页面
 </script>

对于refs的总结：

有三种方式使用refs

  • 字符串形式的ref
<input ref="input">{name}</input>
  • 回调形式的ref
<input ref={ (ele) => {this.input1 = ele} }>{name}</input>
  • 使用React.createRef()创建
myRef = React.createRef()
<input ref={ this.myRef }></input>

节点元素需通过this.myRef.current拿到；

在开发中，要尽量减少对ref的使用，可以通过event.target拿到发生事件的DOM元素；

组件生命周期

组件生命周期是指组件对象从创建到死亡会经历一些特定阶段。又称为组件生命钩子； 

  图片来源React lifecycle methods diagram

 上图展示了reactV16.4以后所有的生命周期函数，

  • 组件挂载时，依次会执行类的构造函数construtor、getDerivedStateFromProps、render函数及componentDidMount

组件挂载通过ReactDOM.render()触发；

static getDerivedStateFromProps(props, state)

 getDerivedStateFromProps会在调用render方法之前被调用，它应返回一个对象来更新state，若返回null则表示不更新任何内容(不写该函数表示返回null)。该函数适用于state的值在任何时候都取决于props。

componentDidMount()方法会在组件挂载后（插入到DOM树中）立即调用。一般在此阶段发送网络请求、开启定时器、订阅消息等；

<script type="text/babel">
    class Demo extends React.Component {
      state = {age: 17}
      myRef = React.createRef() // 创建标记加的span节点
      addAge = () => {
        const newage  = Number(this.myRef.current.innerText) + 1 // 利用this.myRef.current可以拿到span节点
        this.setState({age: newage})
      }
      render() {
        return (
          <div>
            <span ref={this.myRef}>{this.state.age}</span><br/>
            <button onClick={this.addAge}>加一</button><br/>
          </div>
        )
      }
      static getDerivedStateFromProps() {
        console.log('getDerivedStateFromProps')
        return {age: 21} 
// 此处返回state对象中的age为21时，则不论点多少次按钮，age都不会被改变; 若返回null，则age会被修改
      }
      componentDidMount() {
        console.log('componentDidMount') // 在此处设置定时器，发送请求，订阅消息等
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>
  • 组件更新时，依次执行getDerivedStateFromProps、shouldComponentUpdate、render、getSnapShotBeforeUpdate、componentDidUpdate

组件更新由组件内部setState或者父组件更新触发；

shouldComponentUpdate()返回布尔值，用以判断React组件的输出是否受当前state或props更改的影响，默认值是true，表示state每次发生变化组件都会重新渲染；该方法在首次渲染或使用forceUpdate()时不会被调用；但是官网建议慎用哦~

此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate()方法在最近一次渲染输出（提交到DOM节点）之前调用。它使得组件能在发生更改之前从DOM中捕获一些信息，如滚动位置。此方法的任何返回值都将作为参数传递给componentDidUpdate()；该方法并不常用；

componentDidUpdate(prevProps, prevState, snapshot)

componentDidUpdate()方法会在组件更新后立即调用。首次渲染不会执行该方法。如果组件实现了getSnapshotBeforeUpdate()方法，则它的返回值将作为第三个参数传递给componentDidUpdate()，否则该参数为undefined；

  <script type="text/babel">
    class Demo extends React.Component {
      state = {age: 17}
      myRef = React.createRef() // 创建标记加的span节点
      addAge = () => {
        const newage  = Number(this.myRef.current.innerText) + 1 // 利用this.myRef.current可以拿到span节点
        this.setState({age: newage})
      }
      render() {
        return (
          <div>
            <span ref={this.myRef}>{this.state.age}</span><br/>
            <button onClick={this.addAge}>加一</button><br/>
          </div>
        )
      }
      static getDerivedStateFromProps(props, state) {
        console.log('getDerivedStateFromProps')
        return props
      }
      componentDidMount() {
        console.log('componentDidMount')
      }
      shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true
        // 此处设为false则点击按钮不会被更新，下面两个方法就不会被执行，点击true则正常更新
      }
      getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeUpdate')
        return 123
      }
      componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate')
        return 456
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test')) // 渲染虚拟DOM到页面
  </script>
  • 组件卸载时，执行componentWillUnmount()

组件卸载通过ReactDOM.unmountComponentAtNode触发；

componentWillUnmount()用在组件卸载及销毁之前直接调用，一般在此阶段执行必要的清理操作，如清除定时器、取消网络请求或清除在componentDidMount()中创建的订阅；

下图展示了常用的声明周期函数，在日常开发中经常被使用。

图片来源React lifecycle methods diagram

备注：旧版本中有几个弃用的声明周期函数，如 componentWillUnmount() 、componentWillUpdate() 、componentWillReceiveProps()，了解即可~

To be continue~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/380224.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

PHP - ChatGpt 学习 仅供参考

PHP - ChatGpt 学习 仅供参考

由于最近ChatGpt 大火&#xff0c;但是门槛来说是对于大家最头疼的环节&#xff0c; 由此ChatGpt 有一个API 可以仅供大伙对接 让我来说下资质&#xff1a; 1&#xff1a;首先要搞得到一个 ChatGpt 的账户&#xff0c; 会获得一个KEY&#xff0c;该key为访问API核心&#xff0…
阅读更多...
jenkins漏洞集合

jenkins漏洞集合

目录 CVE-2015-8103 反序列化远程代码执行 CVE-2016-0788 Jenkins CI和LTS 远程代码执行漏洞 CVE-2016-0792 低权限用户命令执行 CVE-2016-9299 代码执行 CVE-2017-1000353 Jenkins-CI 远程代码执行 CVE-2018-1000110 用户枚举 CVE-2018-1000861 远程命令执行 CVE-2018…
阅读更多...
ChatGPT文章自动发布WordPress

ChatGPT文章自动发布WordPress

WordPress可以用ChatGPT发文章吗&#xff1f;答案是肯定的&#xff0c;ChatGPT官方有提供api接口&#xff0c;多以目前有很多的SEO工具具有自动文章生成自动发布的功能&#xff0c;使用SEO工具&#xff0c;我们可以通过疑问词和关键词进行文章生成&#xff0c;并定时发布到我们…
阅读更多...
软测入门(三)Selenium（Web自动化测试基础）

软测入门(三)Selenium（Web自动化测试基础）

Selenium&#xff08;Web端自动测试&#xff09; Selenium是一个用于Web应用程序测试的工具&#xff1a;中文是硒 开源跨平台&#xff1a;linux、windows、mac核心&#xff1a;可以在多个浏览器上进行自动化测试多语言 Selenium WebDriver控制原理 Selenium Client Library…
阅读更多...
Linux基础——连接Xshell7

Linux基础——连接Xshell7

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。座右铭&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石&#xff0c;故能成其高。个人主页&#xff1a;小李会科技的…
阅读更多...
复位理论基础

复位理论基础

先收集资料&#xff0c;了解当前常用的基础理论和实现方式 复位 初始化微控制器内部电路 将所有寄存器恢复成默认值确认MCU的工作模式禁止全局中断关闭外设将IO设置为高阻输入状态等待时钟趋于稳定从固定地址取得复位向量并开始执行 造成复位的原因 有多种引起复位的因素&…
阅读更多...
客户关系管理挑战：如何保持客户满意度并提高业绩？

客户关系管理挑战：如何保持客户满意度并提高业绩？

当今&#xff0c;各行业市场竞争愈发激烈&#xff0c;对于保持客户满意度并提高业绩是每个企业都面临的挑战。而客户关系管理则是实现这一目标的关键&#xff0c;因为它涉及到与客户的互动和沟通&#xff0c;以及企业提供优质的产品和服务。在本文中&#xff0c;我们将探讨客户…
阅读更多...
使用Geth搭建多节点私有链

使用Geth搭建多节点私有链

使用Geth搭建多节点私有链 步骤 1.编辑初始化配置文件genesis.json {"config": {"chainId": 6668,"homesteadBlock": 0,"eip150Block": 0,"eip150Hash": "0x000000000000000000000000000000000000000000000000000000…
阅读更多...
JDK下载安装与环境

JDK下载安装与环境

&#x1f972; &#x1f978; &#x1f90c; &#x1fac0; &#x1fac1; &#x1f977; &#x1f43b;‍❄️&#x1f9a4; &#x1fab6; &#x1f9ad; &#x1fab2; &#x1fab3; &#x1fab0; &#x1fab1; &#x1fab4; &#x1fad0; &#x1fad2; &#x1fad1;…
阅读更多...
回暖！“数”说城市烟火气背后

回暖！“数”说城市烟火气背后

“人间烟火气&#xff0c;最抚凡人心”。在全国各地政策支持以及企业的积极生产运营下&#xff0c;经济、社会、生活各领域正加速回暖&#xff0c;“烟火气”在城市中升腾&#xff0c;信心和希望正在每个人心中燃起。 发展新阶段&#xff0c;高效统筹经济发展和公共安全&#…
阅读更多...
JavaEE进阶第六课：SpringBoot配置文件

JavaEE进阶第六课：SpringBoot配置文件

上篇文章介绍了SpringBoot的创建和使用&#xff0c;这篇文章我们将会介绍SpringBoot配置文件 目录1.配置文件的作用2.配置文件的格式2.1 .properties语法2.1.1.properties的缺点2.2 .yml语法2.2.1优点分析2.2.2配置与读取对象2.2.3配置与读取集合2.2.4补充说明3.设置不同环境的…
阅读更多...
陪诊小程序开发|陪诊小程序有哪些功能

陪诊小程序开发|陪诊小程序有哪些功能

陪诊小程序主要就是一款为服务一些无法单独或者很难单独完成就诊流程的人&#xff0c;提供线上下单寻求专业人员陪同就医的一款小程序&#xff0c;陪诊员线上接单&#xff0c;线下为患者提供专业的医疗陪同就医服务。相对于陪诊小程序开发多少钱很多人更想知道陪诊小程序有哪些…
阅读更多...
动态规划：leetcode 139.单词拆分、多重背包问题

动态规划：leetcode 139.单词拆分、多重背包问题

leetcode 139.单词拆分leetcode 139.单词拆分给定一个非空字符串 s 和一个包含非空单词的列表 wordDict&#xff0c;判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词。说明&#xff1a;拆分时可以重复使用字典中的单词。你可以假设字典中没有重复的单词。示例 1&…
阅读更多...
数据库设计规范1

数据库设计规范1

数据库设计规范1 1.所有的表都必须有几个公共字段 这里建有删除标识&#xff0c;代表着我们所有的删除都是软删除。所以我们的删除操作其实是updata 2.id等数字类型的字段&#xff0c;不能知识bigint&#xff0c;应该是bigint unsigned 3.varchar默认长度为32&#xff0c;不…
阅读更多...
MTK平台开发入门到精通（Thermal篇）热管理介绍

MTK平台开发入门到精通（Thermal篇）热管理介绍

文章目录 一、热管理组成二、Linux Thermal Framework2.1、thermal_zone 节点2.2、cooling_device 节点三、Thermal zones沉淀、分享、成长，让自己和他人都能有所收获！😄 📢本篇文章将介绍MTK平台的热管理机制，热管理机制是为了防止模组在高温下工作导致硬件损坏而存在的…
阅读更多...
有趣的 Kotlin 0x10：操作符 ..＜

有趣的 Kotlin 0x10：操作符 ..＜

操作符 …< ..< 操作符是 Kotlin 在 1.7.20 版本中引入的不包含尾部元素的左闭右开区间操作符。之前我们使用的比较多的操作符可能是 .. 和 until&#xff0c;两者均表示区间&#xff0c;前者是闭区间&#xff0c;后者则表示不包含末端元素的左闭右开区间。 OptIn(Expe…
阅读更多...
C++ STL学习之【string类的模拟实现】

C++ STL学习之【string类的模拟实现】

✨个人主页&#xff1a; Yohifo &#x1f389;所属专栏&#xff1a; C修行之路 &#x1f38a;每篇一句&#xff1a; 图片来源 The key is to keep company only with people who uplift you, whose presence calls forth your best. 关键是只与那些提升你的人在一起&#xff0c…
阅读更多...
机器学习与目标检测作业（数组相加:形状需要满足哪些条件）

机器学习与目标检测作业（数组相加:形状需要满足哪些条件）

机器学习与目标检测&#xff08;数组相加:形状需要满足哪些条件&#xff09;机器学习与目标检测&#xff08;数组相加:形状需要满足哪些条件&#xff09;一、形状相同1.1、形状相同示例程序二、符合广播机制2.1、符合广播机制的描述2.2、符合广播机制的示例程序机器学习与目标检…
阅读更多...
模电学习9. MOS管使用入门

模电学习9. MOS管使用入门

模电学习9. MOS管使用入门一、mos管理简介1. 简介2. mos管理的特点3. MOS管的工作状态&#xff08;1&#xff09;放大功能&#xff08;2&#xff09;截止区&#xff08;3&#xff09;饱和区3. Mos管的分类&#xff08;1&#xff09;按照工作模式分类&#xff1a;&#xff08;2&…
阅读更多...
25. K 个一组翻转链表

25. K 个一组翻转链表

题目链接&#xff1a;https://leetcode.cn/problems/reverse-nodes-in-k-group/解题思路&#xff1a;先解决怎么翻转一段链表&#xff0c;然后在解决这道题。翻转一个链表reverse(head,tail)比如将链表1->2->3->4进行翻转&#xff0c;则翻转后的链表为&#xff1a;1&l…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023