2019-06-28 14:28:10 u012372720 阅读数 19
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

生命周期

简单来说,一个 React 组件实例从创建到销毁,会经历创建->挂载->更新(也许重复更新)->销毁的过程。

一、创建和挂载

React.js 将组件渲染,并且构造 DOM 元素然后插入页面的过程称为组件的挂载。

当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下:

constructor()  // React 组件的构造函数

render() // React 组件的渲染函数

componentDidMount() // 在组件挂载(插入 DOM 树中)后触发

二、更新

1. 组件自身的更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下:

shouldComponentUpdate() // 默认当 props 或 state 发生变化时,在渲染执行之前触发

componentWillUpdate() // props 或 state 发生改变时触发

render()

componentDidUpdate() // 在更新后立即触发

2. 父组件引发的更新

父组件发生 render 的时候,无论 props 有没有更新,也无论父子组件之间有没有数据交换,子组件都会触发更新周期。

父组件引发子组件更新的生命周期调用顺序如下:

componentWillReceiveProps() // Component 接受到新的状态 (props) 时触发

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

三、卸载

当组件从 DOM 中移除时会调用如下方法:

componentWillUnmount() // 在组件卸载及销毁之前触发

总结

React 生命周期图

 

2019-06-05 17:23:26 qq_39081974 阅读数 5679
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

实现父组件调用子组件方法:

基本思路:父组件可以通过props把自己的函数方法传递给子组件调用,那么子组件通过这个函数把自己的组件实例传回给父组件,父组件只需要保存这些实例便可以调用子组件的方法

父组件
import React, { Component } from 'react'
import {Layout } from 'antd'
import Friends from './friends'
import ChatWindow from "./chatWindow";
// 父组件
class Home extends Component{
    constructor (props) {
        super(props)
        this.state = { }
    }
    componentDidMount () {
    	// 等待子组件被挂载之后调用子组件方法
   		this.chatWindow.setChat ()
   		// 调用friends子组件中的方法
        this.friends.setFriends ()
    }
    // 获取子组件
    onRef (name, ref) {
        switch (name) {
            case 'chatWindow':
                this.chatWindow = ref
                break
            case 'friends':
                this.friends = ref
                break
            default:
                break
        }
    }
  
    render () {
        return(
            <Layout className='home'>
            // 好友列表子组件
                <Friends
                	 onRef={this.onRef.bind(this)}
                />
                // 聊天窗口子组件
                <ChatWindow
                            onRef={this.onRef.bind(this)}
                 />
            </Layout>
        )
    }
}
export default Home
子组件

friends子组件

import React, {Component} from 'react'

class friends extends Component{
    constructor (props) {
        super(props)
        this.state = {}
    }
    componentDidMount () {
    	// 调用父组件方法把当前实例传给父组件
        this.props.onRef('friends', this)
    }
    // 在父组件中调用的方法
    setFriends () {
        alert('子组件friends')
    }
    render () {
        return (
            <div className='friends'>friends</div>
        )
    }
}
export default friends

chatWindow子组件

import React, {Component} from 'react'

class chatWindow extends Component{
    constructor (props) {
        super(props)
        this.state = {}
    }
    componentDidMount () {
    	// 调用父组件方法把当前实例传给父组件
        this.props.onRef('chatWindow', this)
    }
    // 在父组件中调用的方法
    setFriends () {
        alert('子组件chatWindow')
    }
    render () {
        return (
            <div className='chatWindow'>chatWindow</div>
        )
    }
}
export default chatWindow

2018-11-12 17:08:52 qq_26287435 阅读数 1049
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

react中父组件调用子组件的方法

最近项目中用到了react,需要在父组件中调用子组件的某个方法,那么如何获取到子组件的实例呢?
这里使用了回调,简单实用,兼容低版本。

class Parent extends Component {

  componentDidMount() {
    ...
  }
  
  forceRefresh() {
    // 调用子组件的refresh()方法刷新。
    this.xxxChildView.refresh();
  }
  ...
  render() {
    return (
        <ChildView ref={(ref) => this.xxxChildView = ref} >
            ...
        </ChildView>
    );
}

子组件:

class ChildView extends Component {

  componentDidMount() {
    ...
  }
  
  // 对外提供的刷新方法
  refresh() {
    ...
  }
  ...
  render() {
    return (
        ...
    );
}

参考

1、https://react-cn.github.io/react/docs/more-about-refs.html#

2016-11-04 18:35:16 liangshiquan1 阅读数 743
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

创建一个React组件

创建组件需要调用React.createClass方法,传入的参数为一个对象,对象必须定义一个render方法,render方法返回值为组件的渲染结构,也可以理解为一个组件实例,返回值有且只能为一个组件实例,或者返回null/false,当返回值为null/false的时候,React内部通过标签替换

无状态组件

除了可以通过React.createClass来创建组件以外,组件也可以通过一个普通的函数定义,函数的返回值为组件渲染的结果。
无状态组件能够优化性能,不需要维护状态,React内部不会有一个对应的组件实例,也没有声明周期hook

渲染组件到DOM

主要步骤:
1. 在html中顶一个一个元素,设置id属性
2. JSX中调用ReactDOM.render方法,第一个参数为组件,第二个为刚才定义的DOM元素

组件的渲染:
需要注意的点:
1. 组件可以渲染到多个元素,任意位置的元素;
2. 在程序运行时,能动态调用render;

组件状态State

React组件中可以存储自己的当前状态,其渲染结果由组件属性和状态共同决定,状态和属性的区别是,状态维护在组件内部,属性是由外部控制

控制状态的API

  1. this.state: 组件的当前状态;
  2. getInitialState:获取组件的初始状态,在组件加载的时候会被调用一次,返回值赋予this.state作为初始值
  3. this.setState:组件状态改变时,可以通过this.setState修改状态;setState方法支持按需修改,如state有两个字段,仅当setState传入的对下你给包含字段才会被修改;每次次奥用setState会导致重渲染调用render方法;直接修改state不会重渲染组件。

组件属性props

React组件可以传递属性给组件,传递方法和HTML没有差异,可以通过this.props获取组件属性,属性相关API为:
1. this.props:获取属性值;
2. getDefaultProps: 获取默认属性对象,会被调用一次,当组件类创建的时候会被调用,返回值会被缓存起来,当组件被实例化过后如果传入的属性没有值,会返回默认属性值
3. this.props.children: 子节点属性
4. propTypes: 属性类型检查

children属性

组件属性中有一个特殊属性,表示子组件

属性类型检查

为了保证组件传递属性的正确性,可以通过定义propsType对象来实现对组件属性的严格校验:

    var MyComponent = React.createClass({
        propTypes: {
            optionalArray: React.PropTypes.array,
            optionalBool: React.PropTypes.bool,
            optionalFunc: React.PropTypes.func,
            optionalNumber: React.PropTypes.number,
            optionalObject: React.PropTypes.object,
            optionalString: React.PropTypes.string,
            // 任何可以被渲染的包括,数字,字符串,组件,或者数组
            optionalNode: React.PropTypes.node,
            // React 元素
            optionalElement: React.PropTypes.element,
            // 枚举
            optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
            // 任意一种类型
            optionalUnion: React.PropTypes.oneOfType([
              React.PropTypes.string,
              React.PropTypes.number,
              React.PropTypes.instanceOf(Message)
            ]),
            // 具体类型的数组
            optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
            // 具体类型的对象
            optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
            // 符合定义的对象
            optionalObjectWithShape: React.PropTypes.shape({
              color: React.PropTypes.string,
              fontSize: React.PropTypes.number
            }),
            requiredFunc: React.PropTypes.func.isRequired,
            requiredAny: React.PropTypes.any.isRequired,
            // 自定义校验
            customProp: function(props, propName, componentName) {}
        }
    });

属性单向传递

React的单向数据流模式,数据的流动管道是props,流动的方向是组件的层级自顶向下的方向,所以一个组件不能修改自身属性,组件的属性一定是通过父组件传递过来的或者默认属性

无状态组件属性

对于无状态组件,可以添加.propTypes和.defaultProps属性到函数上

组件的嵌套组合

2016-12-06 21:56:34 hiaia 阅读数 1217
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57824 人正在学习 去看看 李宁

废话不多说  直接上代码

class InputTest extends Com{
	constructor(props){
		super(props);
		this.state = {
			value:""
		}
		this.onChangeHandle = this.onChangeHandle.bind(this);
	}
	onChangeHandle(e){
		this.setState({
			value:"okkkk!"
		});
		setTimeout(function(){
			console.log('settimeout called!');
		},0);
		console.log('onchangehandle called');
	}
	componentDidMount(){
		console.log('componentdidmount!');
	}
	componentDidUpdate(){
		console.log('componentdidupdata');
	}
	render(){
		console.log('render call');
		
		return (
			<div>
				<button type = "button" onClick={this.onChangeHandle} >click!</button>
				ok{this.state.value}
			</div>
		);
	}
	
}

打印顺序

组件实例加载完成后

控制台显示信息

render call   
componentdidmount!

先调用render函数,当组件加载完成后调用componentDidMount函数

当然我要说的问题不是这个而是,而是点击button按钮 调用函数之后onChangeHandle

控制台显示信息

onchangehandle called
 render call
 componentdidupdata
 settimeout called!

onChangeHandle函数调用 并调用了setState函数,然后函数会继续执行完毕,但是在onChangeHandle设置了一个定时器,此时定时器不会立即执行,而是会等到组件实例更新完毕之后再执行改定时器设置的函数。





React:组件API

阅读数 131

React组件中的refs

阅读数 3297

react组件通信1

阅读数 7

没有更多推荐了,返回首页