美文网首页JavaScript 进阶营
React.js学习笔记(4) - 生命周期理解(计时器) +

React.js学习笔记(4) - 生命周期理解(计时器) +

作者: woow_wu7 | 来源:发表于2017-09-11 14:07 被阅读236次

    (1)计时器

    知识点

    (1) toLocaleTimeString() :根据本地时间把 Date 对象的时间部分转换为字符串
    (2) toLocaleDateString() : 根据本地时间把 Date 对象的日期部分转换为字符串
    (3) 一些组件启动的动作,包括像 Ajax 数据的拉取操作、一些定时器的启动等,就可以放在 componentWillMount 里面进行
    /**
     * Created by WOOW.WU on 2017/9/6.
     */
    
    import React, { Component } from 'react';
    
    class Clock extends Component {
        constructor() {  // 数据的初始化
            super();
            this.state = {
                date: new Date()
            }
        }
    
        componentWillMount() {  //组件即将被挂在,render()之前
            this.timer = setInterval( () => {
                this.setState({
                    date: new Date()
                })
            },1000)
        }
    
        componentWillUnmount() {
            clearInterval(this.timer);
            // 必须销毁定时器,因为隐藏的时候仍然在不停的setState
            // 而setState只能在已经挂载或者正在挂载的组件上调用
        }
        render() {
            return(
                <div>
                    <h1>
                        <p>现在的时间是</p>
                        { this.state.date.toLocaleTimeString() }
                       //{ this.state.date.toLocalDateString() }
                    </h1>
                </div>
            )
        }
    }
    
    
    export default Clock
    

    总结:
    我们一般会把组件的 state 的初始化工作放在 constructor 里面去做;在 componentWillMount 进行组件的启动工作,例如 Ajax 数据拉取、定时器的启动;组件从页面上销毁的时候,有时候需要一些数据的清理,例如定时器的清理,就会放在 componentWillUnmount 里面去做。




    (2) 组件的挂载

    组件的挂载:组件的挂载指的是将组件渲染并且构造 DOM 元素然后插入页面的过程。

    (3) ref属性

    ref属性:ref属性用来获取已经挂载的元素的 DOM 节点

    
     // 自动获取input框(textarea)的焦点
    
     componentDidMount() {
            this.input.focus();
            // this.textarea.focus();
        }
    --------------------------------------
     <input
        ref={ (input) => this.input = input }
     />
    
    --------------------------------------
     <textarea type="text"
        ref={ (textarea) => this.textarea = textarea}
       // ref={ (aa) => this.textarea = aa } 两种写法相等
     />
    

    (4) this.props.children 和 React.Children.map

    
    object React.Children.map(object children, function fn [, object context])
    
    使用方法:
    React.Children.map(this.props.children, function (child) {
        return <li>{child}</li>;
    })
    
    其他方法
    this.props.children.forEach(function (child) {
        return <li>{child}</li>
    })
    // this.props.children.forEach类似于 React.Children.map(),但是不返回对象。
    
    
    ( App父组件 )
    
    import React, { Component } from 'react';
    import './App.css';
    import PropsChildren from './propsChildren/propsChildren';
    class App extends Component {
        render() {
          return (
            <div className="App" >  
                <div className="father">
                    <PropsChildren>
                        <div>
                            <h1>props.chilere例子</h1>
                            <input type="text" placeholder="props.chilere例子"/>
                        </div>
                    </PropsChildren>
                </div>
            </div>
        );
      }
    }
    
    export default App;
    
    -----------------------------------------------------------------------
    
    ( PropsChildren子组件 )
    
    
    import React, { Component } from 'react';
    
    class Comment extends Component {
        render() {
            return(
                <div>
                    <div>
                        { this.props.children } 
    
                        //下面是React.Children.map的使用
                        {
                            React.Children.map(this.props.children,function(child) {
                                return <div>{ child }</div>
                            })
                        }                 
                    </div>
                </div>
    
            )
        }
    }
    
    export default Comment
    
    --------------------------------------------------------------------
    ( 父组件样式 )
    .father{
      margin:50px;
      padding:50px;
      background-color: #FFB6C1;
    }
    

    (5) onFocus获得焦点时,触发的函数

    (常用的事件函数汇总)http://lib.csdn.net/article/react/54647

    
    <div className="inputDom">
        <input type="text"
               value={ this.state.inputContent }
                onChange = { this.changeInput.bind(this) }
                ref="focusDom"
                onFocus={ this.clearContent.bind(this) }
          />
         <div onClick={ this.focusClear.bind(this) }>清空内容,获得焦点</div>
    </div>
    -------------------------------------------------------------------------------
    
     clearContent() {
            this.setState({
                inputContent: ''
            })
      }
     focusClear() {
            this.setState({ inputContent: ''}, () => {
                this.refs.focusDom.focus()
            } )
        }
    
    ------------------------------------------------------------------------------
    

    (6) font-awesome 字体图标

    官网:http://fontawesome.io/icons/

    • 安装
    cnpm install font-awesome --save
    
    • 使用
    import 'font-awesome/css/font-awesome.css';
    
    • 改变大小,颜色
    font-size:20px;
    color:red;
    

    (7) iconmoon字体图标制作网站

    官网:https://icomoon.io/#home

    相关文章

      网友评论

        本文标题:React.js学习笔记(4) - 生命周期理解(计时器) +

        本文链接:https://www.haomeiwen.com/subject/pstbjxtx.html