React state与props学习笔记

lk20150415 发布于2019-08-19 18:41 / 281人阅读

摘要：组件的状态与属性组件本质上是状态机，输入确定，输出一定确定。这是在事件处理函数中和请求回调函数中触发更新的主要方法。

组件的状态与属性

组件本质上是状态机，输入确定，输出一定确定。组件把状态与结果一一对应起来，组件中有state与prop（状态与属性）。

属性(props)是由父组件传递给子组件的；

状态(state)是子组件内部维护的数据，当状态发生变化的同时，组件也会进行更新。当状态发生转换时会触发不同的钩子函数，从而让开发者有机会做出相应。

props 属性的用法

键值对：值可以有多种形式：

字符串："XiaoWang";

求值表达式 {123}、{"XiaoWang"};

数组{[1,2,3]};

变量{variable};

函数求值表达式{function}（不推荐，如果需要函数可以多带带把函数提取出来然后多带带调用函数）;

展开语法{...props}：

React会自动把对象中的属性和值当做属性的赋值

var HelloWorld =React.createClass({
    rencer:function () {
        return Hello,{this.props.name1 + " "this.props.name2};
    },
});
var HelloUniverse = React.createClass({
    getInitialState:function () {
        return {
            name1:"Tim",
            name2:"John",
        };
    },
    handleChange: function (event) {
        this.setState({name: event.target.value});
    },
    render: function () {
        return 
        
        

        
        
    },
});
ReactDom.render(,document.body);

setProps：

var HelloWorld =React.createClass({
    rencer:function () {
        return Hello,{this.props.name ? this.props.name : "World"};
    },
});
var instance = React.render(,document.body);
instance.setProps({name:"Tim"});

setProps(object nextProps[, function callback])可以设置组件的属性。这个方法已经过时了（与replaceProps等一样），不久将被删除。这个方法不支持ES6类组件React.Component扩展。

propTypes

组件的属性可以接受任意值，字符串、对象、函数等等都可以。有时，我们需要一种机制，验证别人使用组件时，提供的参数是否符合要求。

var MyTitle = React.createClass({
  propTypes: {
    title: React.PropTypes.string.isRequired,//这个title是必须的，而且它的值必须是字符串
  },
  render: function() {
     return  {this.props.title} ;
   }
});

getDefaultProps

getDefaultProps 方法可以用来设置组件属性的默认值。

var MyTitle = React.createClass({
  getDefaultProps : function () {
    return {
      title : "Hello World"
    };
  },

  render: function() {
     return  {this.props.title} ;
   }
});
ReactDOM.render(,document.body);

this.props.children

this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。

state

组件在运行时需要修改的数据就是状态，this.state 是会随着用户互动而产生变化的特性。组件免不了要与用户互动，React 的一大创新，就是将组件看成是一个状态机，一开始有一个初始状态，然后用户互动，导致状态变化，从而触发重新渲染 UI。

state工作原理

常用的通知 React 数据变化的方法是调用 setState(data, callback)。这个方法会合并（merge） data 到 this.state，并重新渲染组件。渲染完成后，调用可选的 callback 回调。大部分情况下不需要提供 callback，因为 React 会负责把界面更新到最新状态。

getInitialState

object getInitialState()
getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

setState

setState(object nextState[, function callback])
合并 nextState 和当前 state。这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。另外，也支持可选的回调函数，该函数在 setState 执行完毕并且组件重新渲染完成之后调用。this.setState 方法用于修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

replaceState

replaceState(object nextState[, function callback])
类似于 setState()，但是删除之前所有已存在的 state 键，这些键都不在 nextState 中。

哪些组件应该有 State？

大部分组件的工作应该是从 props 里取数据并渲染出来。但是，有时需要对用户输入、服务器请求或者时间变化等作出响应，这时才需要使用 State。

尝试把尽可能多的组件无状态化。这样做能隔离 state，把它放到最合理的地方，也能减少冗余，同时易于解释程序运作过程。

常用的模式是创建多个只负责渲染数据的无状态（stateless）组件，在它们的上层创建一个有状态（stateful）组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑，而这些无状态组件则负责声明式地渲染数据。

参考文章

云服务器 GPU云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79862.html

《深入react技术栈》学习笔记（二）初入React世界

摘要：用于规范的类型与必需的状态。表示由组件更改的数据，通常是通过与用户的交互来更改的。为了实现的修改，需要注册事件处理程序到相应的元素上。当事件发生时，将更新后的值是从中检索，并通知组件。通常情况下，该函数初始化状态使用，，或其他数据存储。前言上一篇文章中，我们讲到了JSX的一些用法和注意事项，这次我们来讲react中最基础也是特别重要的内容：组件。这篇文章包含组件的以下内容：状态、属...

MRZYD 2019-08-20 14:47 评论0 收藏0
React学习笔记3：用es2015（ES6）重写CommentBox

摘要：新搭建的个人博客，本文地址学习笔记用重写在一开始的时候配置中我们就加入了的支持，就是下面的配置，但之前的学习笔记都使用的完成，所以专门作一篇笔记，记录使用完成创建相关文件修改，增加该入口文件修改，引入该文件做个简单的测试，看下浏览器全部用来新搭建的个人博客，本文地址：React学习笔记3：用es2015（ES6）重写CommentBox在一开始的时候webpack配置中我们就加入了e...

selfimpr 2019-08-19 17:30 评论0 收藏0
React学习笔记—UI交互

摘要：事件机制实现了自己的一套事件代理和处理机制，这套机制是符合标准的。事件代理并没有将事件处理添加到相应的每个节点上。当启动时，在根节点上监听所有的事件，并管理事件到相应节点的映射。 props 先看个简单的例子： var HelloWorld = React.createClass({ render: function () { return ( ...

spacewander 2019-08-21 10:29 评论0 收藏0
react 学习笔记

摘要：理论学习产出就是全局的数据源添加事件处理函数订阅数据清除事件处理函数任何时候数据发生改变就更新组件函数接受一个组件参数返回另一个新组件注意订阅数据使用最新的数据渲染组件注意此处将已有的属性传递给原组件理论学习 + demo产出 showImg(https://segmentfault.com/img/bV95Vr?w=1600&h=1200); showImg(https://seg...

tigerZH 2019-08-22 17:02 评论0 收藏0
React学习笔记—简易信息管理，实现CUD

摘要：需求利用实现一个简易的信息管理系统。写的不太好，欢迎熟悉的大神来找茬。真心感激分析编写就是不断构建组件的过程，首先要根据需求进行的划分编码服务端没有用到服务器，采用了数据模拟的方式添加信息时自增长页面组件删除更新新增渲染需求利用React实现一个简易的信息管理系统。showImg(https://segmentfault.com/img/bVloJ6); 写的不太好，欢迎...

MSchumi 2019-08-22 10:56 评论0 收藏0