zoukankan      html  css  js  c++  java
  • (办公)探秘react教程20210331

    1.create-react-app my-react创建项目
    2.npm start启动项目,项目启动是localhost:3000端口
    3.Props传递数据:

        const user = {
        name: "Anna",
        hobbies: ['A','B']
      }
    <Home name={"Max"} age={12} user={user}/>
    子组件:
        {this.props.name}
                       <p></p>
                       {this.props.age}
                       <ul>
                         {this.props.user.hobbies.map((hobby) => <li key={hobby}>{hobby}</li>)}
                       </ul>

    3.1.propType判定传递过来得类型:

    import PropTypes from "prop-types";
    Home.propTypes = {
      name: PropTypes.string,
      age: PropTypes.number,
      user: PropTypes.object
    }

    3.2.子标签,也可以通过props.children来获取并展示:

    <Home name={"Max"} age={12} user={user}>
                           <p>I am child</p>
                 </Home>
    
    Home组件下:
     <div>
                     {this.props.children}  
                  </div> 
    PropTypes判定子节点是否传递过来:
    children: PropTypes.element.isRequired

    4.事件

     onMakeOlder() {
          this.age += 3;
          console.log(this.age);
        }
    调动事件,事件on后面第一个字母大写,同时需要绑定this
    onClick={this.onMakeOlder.bind(this)}
    onClick={() => {this.onMakeOlder()}} 箭头函数
    还可以通过constructor构造方法
    为了在回调中使用 `this`,这个绑定是必不可少的    this.handleClick = this.handleClick.bind(this);
    
    
    补充构造方法:
    初始化构造方法,类初始化得方法,拿到props,方法参数里写起来.
        constructor(props){
          super(props);
          this.age = this.props.age
            // 为了在回调中使用 `this`,这个绑定是必不可少的    this.handleClick = this.handleClick.bind(this);
        }  

    5.state

    state窗台,通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致。React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面
    1.在constructor里声明这个对象
    // 初始化构造方法,类初始化得方法,拿到props,方法参数里写起来.
        constructor(props){
          super(props);
          this.age = this.props.age
            // 为了在回调中使用 `this`,这个绑定是必不可少的    this.handleClick = this.handleClick.bind(this);
            this.state = {
               age: this.props.age
            }
        }
    2.展示
     <p>{this.state.age}</p>
    
    3.改变通过事件
         onMakeOlder() {
          this.setState({
            age: this.state.age + 3
          });
          console.log(this.state.age);
        }

    6.react更新dom
     虚拟得dom,这个dom和上一个虚拟得dom比较,diff,比较出来结果,找到需要改变得,进行重新渲染.

    1.可以在constructor设置一个state得值,然后定时任务只改变一次:
        setTimeout(() => {
              this.setState({
                status: 1
              })
            },3000 )

    7.无状态组件:

    有state并且改变,这种叫做有状态组件.
       无状态式得组件,也叫做函数式组件
       类方式组件:
       import React,{Component} from "react";
    
    class Header extends Component {
        render(){
            return (
               <div className="container">
                 <div className="row">
                     <div className="col-xs-1 col-xs-offset-11">
                       <h1>Header</h1>
                     </div>
                  </div> 
               </div>
            )
        }
    }
    
    export default Header
      函数式组件(重构):
    import React from "react";
    
    const Header = (props) => {
        return (
            <div className="container">
              <div className="row">
                  <div className="col-xs-1 col-xs-offset-11">
                    <h1>Header</h1>
                  </div>
              </div> 
            </div>
        )
    }
    export default Header
    
      写法分为3种:
    1.es5: React.createClass
     
        2.es6写法:React.Component
    3.无状态函数写法
    1.无需state,即不处理用户得输入,组件得所有数据都是依赖props传入得。
    2.不需要用到生命周期得函数.
    无状态组件得好处:
      1.不需要声明类,可以避免大量得譬如extends或者constructor这样得代码
      2.无需要显示得声明this关键字,在ES6得类声明中往往需要将函数得this关键字绑定到当前作用域,而因为函数式声明得特性,我们不需要再强制绑定。
     补充无状态组件是没有生命周期得,如果需要生命周期,需要高阶组件.

    8.子组件向父组件传值:回调函数来处理

    1.父组件定义方法:
         onGreet(age) {
        alert("Hello" + age)
      }
    
       2.子组件去调用,传递参数
       handleGreet() {
          this.props.greet(this.state.age)//父组件得方法,传递子组件得值.
        }

    9.兄弟组件之间得传递值

    通过父组件就可以:子组件得方法,改变父组件,父组件传递给另外一个兄弟组件.

    10.双向数据绑定在react中应该如何实现:

    常用于表单
       onChange值会变化.
       value得设置会随着状态得变化而变化
       DefaultValue可以设置一下默认值
       <input type="text" defaultValue={this.props.initName}  value={this.state.initName}  onChange={(event) => this.onHandleChange(event)} /><br/>
    
    onHandleChange(event){
          this.setState({
           homelink: event.target.value
          })
         }

    11.组件得生命周期:

    组件的生命周期可分成三个状态:
        Mounting:已插入真实 DOM
        Updating:正在被重新渲染
    Unmounting:已移出真实 DOM
       生命周期的方法有:
    1.componentWillMount 在渲染前调用,在客户端也在服务端
    2.componentDidMount 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
    3.componentWillReceiveProps在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
    4.shouldComponentUpdate返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
    可以在你确认不需要更新组件时使用。
    5.componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
    6.componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用。
    7.componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
    
    1.挂载时用得方法(componentWillMount,componentDidMount )
    2.更新得时候用得方法(componentWillReceiveProps,
      shouldComponentUpdate,
    componentWillUpdate,
      componentDidUpdate
    )
    3   组件卸载得时候componentWillUnmount
      
    第一阶段:
    1.Constructor
    2.componentWillmount
    3.render渲染
    4.componentDidMount 
      第二阶段:
    1.componentWillReceiveProps
    2.shouldComponentUpdate
    3.componentWillUpdate
    4.Render()
    5.componentDidUpdate

    官网,不甚了解得可以上官网去瞅瞅:
    https://zh-hans.reactjs.org/docs/handling-events.html

  • 相关阅读:
    setTimeOut 和 setInterval对比
    vue官方源码剖析
    Taro 总结
    地图相交
    vscode 配置文件
    redis持久化的几种方式
    推荐.Net、C# 逆向反编译四大工具利器
    【转】Java 通过JDBC连接Mysql数据库的方法和实例【图文说明】
    【摘】Oracle 11g EM安全证书问题无法访问的解决办法
    MySql 从SQL文件导入
  • 原文地址:https://www.cnblogs.com/historylyt/p/14603194.html
Copyright © 2011-2022 走看看