美文网首页
简述props和state的作用和应用场景

简述props和state的作用和应用场景

作者: 木易先生灬 | 来源:发表于2018-11-04 18:26 被阅读0次

1、简述props和state的作用和应用场景?(难易指数:☆)

React的数据流:由父节点传递到子节点(由外到内传递),如果顶层组件某个prop改变了,React会向下传递,重新渲染所有使用过该属性的组件。

除此之外React 组件“内部”还具有自己的“状态”,这些状态只能在组件内部修改。通过与用户的交互(点击事件),实现不同状态(显示、隐藏、数量增加...),然后渲染UI,让用户界面和数据保持一致。
React中只需更新组件的state,然后根据新的 state 重新渲染用户界面。

this.props 属性:由外部世界传入到组件内部,只读,不可修改。

this.state 状态:由组件自己创建,记录内部变化,可以修改,一般由用户交互产生新的状态(数据)。

总结

1、 状态的初始化,在constructor中使用this.state方法来定义初始化状态
2、 如果要修改状态,必须使用this.setState({newState:newValue})

React组件显示的变化,都是通过状态的修改,自动(重写)渲染到页面中。

state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变。
这就是为什么有些容器组件需要定义 state 来更新和修改数据。而组件只能通过 props 来传递数据。

state属于内部状态维护。
props属于外部传入(定义)。

2、简述PropsType的作用,并举2个常见例子。(难易指数:☆)

React组件创建的时候,需要传入属性,我们可以使用使用PropTypes进行类型检查,您可以使用React.PropTypes在组件的道具上运行。

React.PropTypes 自 React v15.5以来,它已经进入了一个不同的包--”prop-types”.

安装

yarn add prop-types -D

使用

import PropTypes from 'prop-types';
PropTypes.array  //检测数组类型
PropTypes.bool  //检测布尔类型
PropTypes.func  //检测函数类型
PropTypes.number  //数字
PropTypes.object  //对象
PropTypes.string  //字符串
PropTypes.symbol  //symbol
PropTypes.instanceOf()  //继承自XXX
PropTypes.oneOf([‘值1’,’值2’])  //任意一个值
PropTypes.oneOfType([ PropTypes.array, PropType.bool ... ])  //数组内任意一种类型
默认情况下,验证器将props视为可选属性。
class LifeCycle extends React.Component{
    static propTypes = {  // 定义默认参数
        name:PropTypes.string
    }
}

3、简述组件的生命周期及对应作用(难易指数:☆☆)

React生命周期可以分成三个阶段:

1、挂载阶段:对象创建到完全渲染(实例化)
2、运行阶段:组件状态的改变(最长阶段)
3、卸载阶段:组件使用完毕后,或者不需要存在与页面中,那么将组件移除,执行销毁。

生命周期(三个阶段)
    1. 挂载阶段(组件初始化及第一次渲染)
       生命周期钩子函数
        constructor: 状态初始化
        componentWillMount: 通知函数,状态初始化完毕,可以开始渲染(在REACT 17.0会被废弃)
        render: 渲染函数,进行组件渲染
        componentDidMount: 通知函数,初始化渲染完毕,可以发送初始化ajax请求数据


    2. 运行阶段(所有函数调用次数>=0)
        componentWillReceiveProps: 自定义属性发生变化
        shouldComponentUpdate: 是否允许组件渲染(true允许,false阻止)
        componentWillUpdate:通知函数:组件将要更新
        render: 渲染函数
        componentDidUpdate: 通知函数:组件更新渲染完毕

    3. 销毁阶段
        componentWillUnmount: 卸载前的最后一次通知(资源回收!!!)


    3个最重要的钩子
    constructor 定义状态
    componentDidMount 初始化ajax数据

    componentWillUnmount 卸载组件,回收资源(例如定时器)
      //卸载函数(性能优化挂钩的函数!!)
      //资源回收及释放(例:定时器之类就在此函数内进行回收!!!!!!)

4、简述在生命周期中的哪一步你应该发起 AJAX 请求,为什么(难易指数:☆☆)

componentDidMount: 通知函数,初始化渲染完毕,可以发送初始化ajax请求数据

5、简述受控组件和不受控组件的区别(难易指数:☆☆)

this.props 属性:由外部世界传入到组件内部,只读,不可修改。
this.state 状态:由组件自己创建,记录内部变化,可以修改,一般由用户交互产生新的状态(数据)。

相关文章

  • 简述props和state的作用和应用场景

    1、简述props和state的作用和应用场景?(难易指数:☆) React的数据流:由父节点传递到子节点(由外到...

  • state 和 props

    应该尽量让你的组件无状态化。 状态化指的是state来超级和变化的特性。 props应该是不会变化的特性。 比如这...

  • state和props

    state state 是私有的,并且完全受控于当前组件。class组件才有state。 将函数组件转化成clas...

  • 2019-06-05 React(props和states、ma

    props和states总结 1、state 的主要作用是用于组件保存、控制、修改自己的可变状态。state 在组...

  • React props

    React Props state 和 props 主要的区别在于 props 是不可变的,而 state 可以根...

  • React中的props和state

    props和state this.props 由 React 本身设定, 而 this.state 具有特殊的含义...

  • React学习笔记2

    1.render函数对于props和state必须是纯函数 render函数不能改变props和state的属性,...

  • react native学习笔记6——Props和State

    Props(属性)和State(状态)是React Native中很重要的两个概念。使用Props和State,结...

  • React内部状态state

    state   React组件的数据分为两种:props和state,props是组件的对外接口,state是组件...

  • react组件间通信

    react中的props和state props只读,用于组件之间传递信息,这个信息包括:数据和函数 state用...

网友评论

      本文标题:简述props和state的作用和应用场景

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