程序员经验分享-hwhale

react - 条件渲染，列表渲染，表单绑定，状态提升

2023-10-27

九、条件渲染

在 React 中，你可以创建不同的组件来封装各种你需要的行为。然后还可以根据应用的状态变化只渲染其中的一部分。

React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

9.1 &&

你可以通过用花括号包裹代码在 JSX 中嵌入任何表达式 ，也包括 JavaScript 的逻辑与 &&，它可以方便地条件渲染一个元素。

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

import App from './04_condition/01_App_condition_yu' // 条件判断与

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/01_App_condition_yu.jsx

// src/04_condition/01_App_condition_yu.jsx
import React, { Component } from 'react';

class MailBox extends Component {
  render () {
    return (
      <div>
        { 
          this.props.unReadMessage.length > 0 && <div>还有{this.props.unReadMessage.length}未读邮件</div>
        }
      </div>
    )
  }
}
export default class App extends Component {
  state = {
    messageList: ['a', 'b', 'c', 'd']
  }
  render() {
    return (
      <div>
        {
          // 如果messageList从服务器获取， 初始数据为空数组，其实没有必要 map 遍历
          this.state.messageList && this.state.messageList.map((item, index) => {
            return (
              <p key={ index }>
                { item }
                <button onClick={
                  () => {
                    // 获取数据
                    const arr = this.state.messageList
                    // 处理数据
                    arr.splice(index, 1)
                    // 修改状态
                    this.setState({
                      messageList: arr
                    })
                  }
                }>阅读</button>
              </p>
            )
          })
        }
        <MailBox unReadMessage = { this.state.messageList }/>
      </div>
    );
  }
}

9.2 三元运算符

条件渲染的另一种方法是使用 JavaScript 的条件运算符:

condition ? true : false。

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/02_App_condition_san.jsx

// src/04_condition/02_App_condition_san.jsx
// 在jsx 中不要使用  if 以及 for 等流程控制语句
// 可以在 if 条件语句中  返回 jsx代码
import React, { Component } from 'react';

export default class App extends Component {

  state = {
    loginState: false
  }

  // 1.三元运算符
  // render () {
  //   return (
  //     <div>
  //       { this.state.loginState ? '登录了' : '未登录' }
  //       <button onClick={ () => {
  //         this.setState({
  //           loginState: !this.state.loginState
  //         })
  //       }}>切换</button>
  //     </div>
  //   )
  // }


  // render () {
  //   if (this.state.loginState) {
  //     return (
  //       <div>
  //         登录了
  //         <button onClick={ () => {
  //           this.setState({
  //             loginState: !this.state.loginState
  //           })
  //         }}>切换</button>
  //       </div>
  //     )
  //   } else {
  //     return (
  //       <div>
  //         未登录
  //         <button onClick={ () => {
  //           this.setState({
  //             loginState: !this.state.loginState
  //           })
  //         }}>切换</button>
  //       </div>
  //     )
  //   }
  // }

  render () {
    const HTML = <button onClick={ () => {
      this.setState({
        loginState: !this.state.loginState
      })
    }}>切换</button>
    if (this.state.loginState) {
      return (
        <div>
          登录了 { HTML }
        </div>
      )
    } else {
      return (
        <div>
          未登录 { HTML }
        </div>
      )
    }
  }
}

9.3 动态className

Vue中有很方便的动态绑定class属性的方式，v-bind:class,那么react怎么实现这样的效果呢？

<button class="btn btn-success btn-sm"></button>

<button class="btn btn-danger btn-sm"></button>

<button class="btn btn-warning btn-sm"></button>

{ this.state.type === 'success' ? 'btn btn-success btn-sm' : 'btn btn-sm'}

通过classnames这个插件可以实现

$ cnpm i classnames -S

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
import App from './04_condition/03_App_condition_classname' // 条件判断 样式

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/03_App_condition_classname.jsx

// src/04_condition/03_App_condition_classname.jsx
import React, { Component } from 'react'
import classnames from 'classnames'
export default class App extends Component {
  state = {
    type: 'default', // success danger warning default
    size: 'md' // sm  md  lg  (小 中 大)
  }
  render() {
    return (
      <div>
        <button onClick={ () => this.setState({ type: 'success' })}>success</button>
        <button onClick={ () => this.setState({ type: 'danger' })}>danger</button>
        <button onClick={ () => this.setState({ type: 'warning' })}>warning</button>
        <button onClick={ () => this.setState({ type: 'default' })}>default</button>
        <button onClick={ () => this.setState({ size: 'sm' })}>sm</button>
        <button onClick={ () => this.setState({ size: 'md' })}>md</button>
        <button onClick={ () => this.setState({ size: 'lg' })}>lg</button>
        <button className={ 
          classnames({
            btn: true,
            'btn-success': this.state.type === 'success',
            'btn-sm': this.state.size === 'sm' 
          })
         }>success小号按钮</button>

        <button className={ (this.state.type === 'success' && this.state.size === 'sm') ? 'btn btn-success btn-sm' : (this.state.type === 'success' && this.state.size !== 'sm') ? 'btn btn-success' : (this.state.type !== 'success' && this.state.size === 'sm') ? 'btn btn-sm' : 'btn'}>success小号按钮</button>
      </div>
    )
  }
}

补充：

  • css-in-js

    $ cnpm i styled-components -S

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
// import App from './04_condition/03_App_condition_classname' // 条件判断 样式
import App from './04_condition/04_App_condition_cssinjs' // css in js

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/04_App_condition_cssinjs.jsx

// src/04_condition/04_App_condition_cssinjs.jsx
import styled from 'styled-components'
import React, { Component } from 'react';

// css in js
const Button = styled.button`
  padding: 30px;
  font-size: 20px;
`
export default class App extends Component {
  render() {
    return (
      <div>
        <Button>按钮</Button>
      </div>
    );
  }
}
  • 模块化css

可以解决类似于 vue中 scoped

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
// import App from './04_condition/03_App_condition_classname' // 条件判断 样式
// import App from './04_condition/04_App_condition_cssinjs' // css in js
import App from './04_condition/05_App_module_css' // 模块化css

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/05_App_module_css.jsx

// src/04_condition/05_App_module_css.jsx
import './style.css'
// 模块化css
import style from './style.module.css'
import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      // <div className="container">
      //   <header className="header"></header>
      //   <div className="content"></div>
      //   <footer className="footer"></footer>
      // </div>
      <div className={ style.container }>
        <header className={ style.header}></header>
        <div className={ style.content}></div>
        <footer className={ style.footer}></footer>
      </div>
    );
  }
}

src/04_condition/style.module.css

* {padding: 0; margin: 0;}
html, body{ height: 100%;}
#root { height: 1000px;}
.container {
  width: 100%;
  height: 600px;
  display: flex;
  flex-direction: column;
}

.header {
  height: 100px;
  background-color: #f66;
}
.content {
  flex: 1;
}
.footer {
  height: 100px;
  background-color: #ccc;
}

9.4 动态style

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './01_props/01_Parent_Child' // 父子组件
// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值
// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值
// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,验证数据类型
// import App from './01_props/05_App_props_children' // 类插槽
// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽 多个插槽 
// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随 
// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // 初始化状态 - es6的构造函数
// import App from './02_state/02_App_state_es7' // 初始化状态 - es7 属性初始化器
// import App from './02_state/03_App_setState_function' // 修改状态 传递函数
// import App from './02_state/04_App_setState_object' // 修改状态 传递对象
// import App from './02_state/05_App_computed' // 类组件实现类似于vue的计算属性
// import App from './02_state/06_App_lifeCycle' // 生命周期

// import App from './03_event/01_App_event_es5' // es5事件绑定
// import App from './03_event/02_App_event_es6' // es6事件绑定

// import App from './04_condition/01_App_condition_yu' // 条件判断与
// import App from './04_condition/02_App_condition_san' // 条件判断 三元运算符
// import App from './04_condition/03_App_condition_classname' // 条件判断 样式
// import App from './04_condition/04_App_condition_cssinjs' // css in js
// import App from './04_condition/05_App_module_css' // 模块化css
import App from './04_condition/06_App_style' // 动态style

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/04_condition/06_App_style.jsx

// src/04_condition/06_App_style.jsx
import React, { Component } from 'react'
// style 小驼峰式 单位可省略
export default class App extends Component {
  state = {
    size: 12,
    color: '#000'
  }
  render() {
    // <></> 空标签
    return (
      <>
        <input type="color" value={ this.state.color } onChange = { event => this.setState({ color: event.target.value })} />
        <button onClick={ () => this.setState({ size: this.state.size + 2 })}>加</button>
        <button onClick={ () => this.setState({ size: this.state.size - 2 })}>减</button>
        <div style={ { fontSize: this.state.size + 'px', color: this.state.color } }>
          自从去年中国决定逐渐放松防疫限制之后，中国疫情成为全球关注的焦点，引起诸多外国媒体的好奇。近日，《纽约时报》发布报道称：“早有预见中国的新冠清零会结束，但是从来没有想过会以这样的方式结束。”
        </div>
      </>

    )
  }
}

十、列表渲染

  • map()方法、key

使用 map() 方法遍历数组

组件接收数组参数，每个列表元素分配一个 key，不然会出现警告 a key should be provided for list items，意思就是需要包含 key：

Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。

一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常，我们使用来自数据的id作为元素的 key

当元素没有确定的 id 时，你可以使用他的序列号索引 index 作为 key

如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
import App from './05_list/01_App_map'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/05_list/01_App_map.jsx

// src/05_list/01_App_map.jsx
// React中使用 map 来遍历数据，需要 添加唯一值key

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    list: ['aa', 'bb', 'cc', 'dd']
  }
  // 边遍历边渲染
  // render() {
  //   return (
  //     <div>
  //       {
  //         this.state.list && this.state.list.map((item, index) => {
  //           return (
  //             <div key = { index }>{ item }</div>
  //           )
  //         })
  //       }
  //     </div>
  //   )
  // }

  // 先遍历后渲染
  render () {
    const arr = []
    this.state.list.forEach((item, index) => {
      arr.push(<div key = { index }>{ item }</div>)
    })

    return (
      <div>
        { arr }
      </div>
    )
  }
}

接口 http://121.89.205.189:3000/api/city/sortCity

实现多层遍历

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
// import App from './05_list/01_App_map'
import App from './05_list/02_App_mutiple_map'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/05_list/02_App_mutiple_map.jsx

// src/05_list/02_App_mutiple_map.jsx
// React中使用 map 来遍历数据，需要 添加唯一值key

import React, { Component } from 'react'

export default class App extends Component {
  state = {
    list: ['aa', 'bb', 'cc', 'dd'],
    newList: [
      {
        brand: '宝马',
        data: ['X5', 'X7']
      },
      {
        brand: '奥迪',
        data: ['Q3', 'RS7']
      }
    ]
  }
  // 边遍历边渲染
  // render() {
  //   return (
  //     <div>
  //       {
  //         this.state.list && this.state.list.map((item, index) => {
  //           return (
  //             <div key = { index }>{ item }</div>
  //           )
  //         })
  //       }

  //       {
  //         this.state.newList && this.state.newList.map(item => {
  //           return (
  //             <div key = { item.brand }>
  //               {
  //                 item.brand 
  //               }
  //               {
  //                 item.data.map((itm, idx) => {
  //                   return <p key = { idx }> { itm }</p>
  //                 })
  //               }
  //             </div>
  //           )
  //         })
  //       }
  //     </div>
  //   )
  // }

  // 先遍历后渲染
  render () {
    const arr = []
    this.state.list.forEach((item, index) => {
      arr.push(<div key = { index }>{ item }</div>)
    })

    const newArr = []
    this.state.newList.forEach(item => {
      const newData = []
      item.data.forEach((itm,idx) => {
        newData.push(<p key = { idx }>{ itm }</p>)
      })
      newArr.push(<div key = { item.brand }>{ item.brand } - { newData }</div>)
    })
    return (
      <div>
        { arr }
        { newArr }
      </div>
    )
  }
}

十一、表单绑定

在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。例如这个纯 HTML 表单只接受一个名称：

<form>
  <label>
    名字:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="提交" />
</form>

此表单具有默认的 HTML 表单行为，即在用户提交表单后浏览到新页面。如果你在 React 中执行相同的代码，它依然有效。但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。

表单元素的value值受 state的控制

11.1 各种表单的绑定与取值

src/index.js

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'

// 引入react组件时，后缀名可以不写
import App from './06_form/01_App_form'

const root = ReactDOM.createRoot(document.querySelector('#root'))

root.render(<App />)

src/06_form/01_App_form.jsx

// src/06_form/01_App_form.jsx

import React, { Component } from 'react';

export default class App extends Component {
  state = {
    userName: '',
    password: '',
    sex: '',
    hobby: [],
    lesson: '',
    note: '',
    flag: false
  }

  changeVal (event) {
    console.log(event)
    // this.setState({
    //   userName: event.target.value
    // })
    this.setState({
      [event.target.name]: event.target.value
    })
  }

  handlerHobbyChange (event) {
    console.log(event.target.checked)
    const checked = event.target.checked
    const value = event.target.value
    const arr = this.state.hobby
    if (checked) {
      arr.push(value)
    } else {
      const index = arr.findIndex((item) => {
        return item === value
      })
      arr.splice(index, 1)
    }
    console.log('22', arr)
    this.setState({
      hobby: arr
    })
  }
  render() {
    return (
      <div>
        <div>
          <input type="text" name="userName"  value = { this.state.userName } onChange = { this.changeVal.bind(this) }/>
          { this.state.userName }
        </div>
        <div>
          <input type="password" name="password"  value = { this.state.password } onChange = { this.changeVal.bind(this) }/>
          { this.state.password }
        </div>
        <div>
          <input type="radio" name="sex"  value = '男' onChange={ this.changeVal.bind(this) }/>男
          <input type="radio" name="sex"  value = '女' onChange={ this.changeVal.bind(this) }/>女
           ---- { this.state.sex }
        </div>
        <div>
          <input type="checkbox" name="hobby" value="
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

React

ReactJS

前端

react - 条件渲染，列表渲染，表单绑定，状态提升 的相关文章

随机推荐

  • React——函数组件与类组件

    一 函数组件 和 类组件介绍 1 函数组件 函数组件也称无状态组件 顾名思义就是以函数形态存在的 React 组件 在 hooks 出现之前 react 中的函数组件通常只考虑负责UI的渲染 没有自身的状态 没有业务逻辑代码 是一个纯函数

  • 软件开发中项目经理有那些职责

    搜集了一篇软件开发中项目管理的文章 大家看看 当项目繁多的时候 需要规范 并且定义到细节 只有这样 才能支持大规模的开发 PM非常重要 PM的能力将直接导致项目最后的质量 本文是根据公司当前的现状而描述的 并不一定普遍适用 合适的 就是最好

  • linux登录界面配置、\etc\motd有趣的图案

    linux登录显示图案 etc motd介绍 图案 佛祖保佑 佛祖瘫痪 fuck me 神兽羊驼 海贼旗 啪 初音未来 攻城狮 we wang you 自制图案 etc motd介绍 etc motd 这个文件是在你登录之后显示的 不管你是

  • sklearn中的datasets.make_moons函数

    make moons是函数用来生成数据集 from sklearn import datasets x y datasets make moons n samples 800 noise 0 3 shuffle True random st

  • 寻路算法——A*算法

    2 寻路算法 A 算法剖析 2 1 A 算法简介 原文链接 http www gamedev net reference articles article2003 asp 原作者文章链接 http www policyalmanac org

  • gitlab持续集成-部门官网文档

    https gitlab com gitlab org gitlab blob master lib gitlab ci templates Nodejs gitlab ci yml https gitlab com gitlab org

  • 软件测试外包公司怎么样？为什么没人去？看我终极解密外包！

    目录 导读 一 前言 什么是软件测试外包 二 软件测试外包的好处与坏处 三 进软件测试外包公司前的思考 四 软件测试外包流行的原因挖掘 五 总结 一 前言 什么是软件测试外包 随着最近10年创业风气的发起 已经涌起创业项目外包公司的兴起 已

  • 算法笔记5.6--N的阶乘

    题目描述 输入一个正整数N 输出N的阶乘 输入 正整数N 0 lt N lt 1000 输出 输入可能包括多组数据 对于每一组输入数据 输出N的阶乘 样例输入 0 4 7 样例输出 1 24 5040 代码 struct bign int

  • 史上最全的 Spring Boot 学习教程

    本文目录 一 Spring Boot入门 二 Spring Boot配置 三 Spring Boot与日志 四 Spring Boot与Web开发 五 Spring Boot与Docker 六 Spring Boot与数据访问 七 Spri

  • 历时130天784分通过了HCIE笔试

    这是自己送给自己2023年最好的礼物 从学习到备考笔试经历了130天 对我来说每天都是背负着一个沉重的包袱前行 活的很累很累 期间不被人理解 学到崩溃 并且放弃了n次又爬起来 不得不说这些我都熬过来了 其实感觉一张成绩单就能检验一个人的能力

  • kinect fusion+opencv程序

    define CRT SECURE NO WARNINGS include pch h This file is part of OpenCV project It is subject to the license terms in th

  • C++:实现socket通信（TCP/IP）实例

    首先声明 博主之前从来没有写过通信方面的东西 这次之所以写这个是因为项目需要 因此本文主要介绍一个使用C 语言及Socket来实现TCP IP通信的实例 希望可以帮助入门者 本教程 属于基础教程 针对入门者 如需更深入的功能 自行扩展 IP

  • 【数据结构】图的创建与遍历

    图 Graph 是由顶点的有穷非空集合和顶点之间边的集合组成 通常表示为 G V E 其中 G表示一个图 V是图G中顶点的集合 E是图G中边的集合 线性表 线性关系 由直接前驱和直接后继组成 树 层次关系 由父结点和孩子结点组成 每个结点最

  • 访问XP共享出现的问题解决办法

    好多xp系统启用了guest也无法网络访问 故障解决如下 启用了guest为什么仍然不能访问 1 默认情况下 xp 禁用guest帐户 2 默认情况下 xp的本地安全策略禁止guest用户从网络访问 3 默认情况下 xp的本地安全策略 用户

  • redisson分布式锁

    RLock官网解释 基于Redis的Java分布式可重入锁对象 实现了锁接口 如果获得锁的Redisson实例崩溃 那么这种锁可能永远挂起在获得状态 为了避免这种情况 Redisson维护了锁看门狗 它在锁持有者Redisson实例活着的时

  • CKEditor去掉默认的

    的处理

    CKEditor在使用的时候 编辑框中总是默认带有P元素 如何去掉呢 请看下面 1 在ckeditor里的config js中添加 config enterMode 1 回车的时候增加的是p config enterMode 2 回车的时候

  • 毕业设计-基于深度学习的作物长势监测和产量估测研究

    目录 前言 课题背景和意义 实现技术思路 一 区域尺度的作物长势监测和产量估测研究进展 二 田块尺度的作物长势监测和产量估测研究进展 实现效果图样例 最后 前言 大四是整个大学期间最忙碌的时光 一边要忙着备考或实习为毕业后面临的就业升学做准

  • CMAKE——message()函数

    message 为用户显示一条消息 message STATUS WARNING AUTHOR WARNING FATAL ERROR SEND ERROR message to display 可以用下述可选的关键字指定消息的类型 无 重

  • keil编译后报错Error:L6218E的解决方法汇总

    一 检查有没有添加头文件或者源文件 1 头文件 添加 举例子 Error L6218E Undefined symbol MX SPI1 Init referred from w25q64 o 中MX SPI1 Init函数所在头文件 或者

  • react - 条件渲染，列表渲染，表单绑定，状态提升

    九 条件渲染 在 React 中 你可以创建不同的组件来封装各种你需要的行为 然后还可以根据应用的状态变化只渲染其中的一部分 React 中的条件渲染和 JavaScript 中的一致 使用 JavaScript 操作符 if 或条件运算符

热门标签

Powered by Hwhale