Reactjs 入门基础(三)

State 和 Props
以下实例演示了如何在应用中组合使用 state 和 props 。我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上。
在 render 函数中, 我们设置 name 和 site 来获取父组件传递过来的数据。

Props 验证

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。
当向 props 传入无效数据时,JavaScript 控制台会抛出警告。
以下实例创建一个 Mytitle 组件,属性 title 是必须的且是字符串,如果是一个数字则会报错 :

    <body>
      <div id="example"></div>
      <script type="text/babel">
        var title = "柠檬先生";
          // var title = 123;
        var MyTitle = React.createClass({
          propTypes: {
            title: React.PropTypes.string.isRequired,
          },

          render: function() {
                return <h1> {this.props.title} </h1>;
              }
          });
        ReactDOM.render(
          <MyTitle title={title} />,
            document.getElementById(‘example‘)
        );
      </script>
    </body>

React Refs
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。
这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例。

设置状态:setState
setState(object nextState[, function callback])

参数说明
nextState,将要设置的新状态,该状态会和当前的state合并
callback,可选参数,回调函数。该函数会在setState设置成功,且组件重新渲染后调用。
合并nextState和当前state,并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

关于setState
不能在组件内部通过this.state修改状态,因为该状态会在调用setState()后被替换。
setState()并不会立即改变this.state,而是创建一个即将处理的state。setState()并不一定是同步的,为了提升性能React会批量执行state和DOM渲染。
setState()总是会触发一次组件重绘,除非在shouldComponentUpdate()中实现了一些条件渲染逻辑。   

    实例
    var Counter = React.createClass({
        getInitialState: function () {
            return { clickCount: 0 };
        },
    handleClick: function () {
        this.setState(function(state) {
          return {clickCount: state.clickCount + 1};
        });
     },
    render: function () {
      return (<h2 onClick={this.handleClick}>点我!点击次数为: {this.state.clickCount}</h2>);
      }
    });
    ReactDOM.render(
        <Counter />,
        document.getElementById(‘message‘)
    );

替换状态:replaceState
replaceState(object nextState[, function callback])
nextState,将要设置的新状态,该状态会替换当前的state。
callback,可选参数,回调函数。该函数会在replaceState设置成功,且组件重新渲染后调用。
replaceState()方法与setState()类似,但是方法只会保留nextState中状态,原state不在nextState中的状态都会被删除。

设置属性:setProps
setProps(object nextProps[, function callback])
nextProps,将要设置的新属性,该状态会和当前的props合并
callback,可选参数,回调函数。该函数会在setProps设置成功,且组件重新渲染后调用。
设置组件属性,并重新渲染组件。
props相当于组件的数据流,它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时,
我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染,可以使用setProps()。
更新组件,我可以在节点上再次调用React.render(),也可以通过setProps()方法改变组件属性,触发组件重新渲染。

替换属性:replaceProps
replaceProps(object nextProps[, function callback])
nextProps,将要设置的新属性,该属性会替换当前的props。
callback,可选参数,回调函数。该函数会在replaceProps设置成功,且组件重新渲染后调用。
replaceProps()方法与setProps类似,但它会删除原有
props

强制更新:forceUpdate
forceUpdate([function callback])

参数说明
callback,可选参数,回调函数。该函数会在组件render()方法调用后调用。
forceUpdate()方法会使组件调用自身的render()方法重新渲染组件,组件的子组件也会调用自己的render()。但是,组件重新渲染时,
依然会读取this.props和this.state,如果状态没有改变,那么React只会更新DOM。
forceUpdate()方法适用于this.props和this.state之外的组件重绘(如:修改了this.state后),通过该方法通知React需要调用render()
一般来说,应该尽量避免使用forceUpdate(),而仅从this.props和this.state中读取状态并由React触发render()调用。

获取DOM节点:getDOMNode
DOMElement getDOMNode()
返回值:DOM元素DOMElement
如果组件已经挂载到DOM中,该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时,this.getDOMNode()也会返回null。
从DOM 中读取值的时候,该方法很有用,如:获取表单字段的值和做一些 DOM 操作。

判断组件挂载状态:isMounted
bool isMounted()
返回值:true或false,表示组件是否已挂载到DOM中
isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的调用不会出错。

时间: 2024-10-12 21:35:19

Reactjs 入门基础(三)的相关文章

shell 入门基础三

    linux shell 编程 1什么是bash shell 变量 shell变量可分为两类: 局部变量和环境变量. 局部变量只在创建它们的shell中可用.而环境变量则可以在创建它们的shell及其派生出来的任意子进程中使用.有些变量是用户创建的,其他的则是专用shell变量.变量名必须以字母或下划线字符开头.其余的字符可以是字母.数字(0~9)或下划线字符.任何其他的字符都标志着变量名的终止.名字是大小写敏感的.给变量赋值时,等号周围不能有任何空白符.为了给变量赋空值,可以在等号后跟一

ReactJS入门基础

渲染这俩字可能在很多地方都见过.但可能不太理解是啥意思. 那么首先我们来理解一下渲染. 渲染 我觉得这样理解比较通俗. 我们做一个汽车,开始是没有喷漆的(没有css) 只是些框框架架(HTML标签).那么网页加载就是首先加载完HTML元素,其次是css,css去遍历渲染每个对应元素的样式让其看起来就是我们所想看到的效果一样.不同浏览器的渲染方式不一样,渲染机制也不一样. 简单来将一个完整的HTML页面渲染完成是有2个东西的.一个HTML元素加载完成,一个是CSS样式加载完成.其次才是JS,如果J

C#入门基础三

封装:简化用户接口,隐藏实现细节. get{return 属性值:} set{属性值 = value:} 继承:子类继承父类所有非私有成员.继承具有传递性,单根性. 隐式继承:用引号(:)实现. 显示继承:关键字(:base)实现. 显示继承与隐式继承的区别: 简单来说就是说 如果继承的一堆接口中 有2个或者2个以上的接口有同名的属性/方法,而它们又是不同的功能的话,你就应该显示继承接口 反过来 随意(一般用隐式,因为可以偷懒) 如果你很犹豫应该用哪一种 而又必须保证不会出问题 直接使用显式 方

mybatis入门基础(三)----SqlMapConfig.xml全局配置文件解析

阅读目录 一:SqlMapConfig.xml配置文件的内容和配置顺序如下 二:properties属性 三:settings全局参数配置 四:typeAiases(别名)--重点掌握 五:typeHandlers(类型处理器) 六:mappers(映射配置) 回到顶部 一:SqlMapConfig.xml配置文件的内容和配置顺序如下 properties(属性) settings(全局配置参数) typeAiases(类型别名) typeHandlers(类型处理器) objectFactor

ReactJS入门(三)—— 顶层API

本文基本跟着官方文档把API都走一遍,但会有实例来解释应该怎么用,木有比我更详细的API文档咯. React.createClass 参数:CONFIG(object) 创建一个ReactClass(组件类),参数是一个对象且必须带有 render 属性方法,该方法必须返回一个封闭的容器(容器内可以有其它不限结构的容器)或 null/false(表示啥都不渲染): var Component = React.createClass({ render: function() { return th

Objective-C 快速入门--基础(三)

1.OC有几种方式创建字符串对象?如:如何创建一个字符串对象:@“Baby”. OC中有3种方式创建字符串对象: 示例:main.m文件中: 控制台输出: 2.OC中如何获取字符串的长度? OC中获取字符串的长度要用“length”; 示例:mian.m文件中: 控制台输出: 3.判断字符串是否以指定字符串开始或结束:用代码举例. 示例:main.m文件中: 控制台输出: 4.查找某个字符串在另一个字符串中的范围. 如查找在字符串@”爱你”在@”我爱你们”中的范围. 示例:main.m文件中:

Reactjs 入门基础(二)

如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下: <body> <div id="example"></div> <script type="text/babel"> var HelloMessage = React.createClass({ render: function() { return <h1>Hello {this.props.name}</h1>;

2015.4.10-C#入门基础(三)

今天,我们聊一聊一些基本问题: 1.修饰符有哪些?有什么区别呢? 首先大家想到的应该是 public:特点是所属类的成员和非所属类的成员都可以访问 private:只有所属类的成员才可以访问 protected:所属类或派生自所属类的类型可以访问 internal: 当前程序集可以访问,也就是 一个程序下的几个类 那么 还有一个就是       protected internal:不同的是,只有当前程序集他的子类 才可以访问 2.方法是什么呢,怎么用的呢? 方法就是由程序语句组成的,调用方法名

Python入门基础学习 三

Python入门基础学习 三 数据类型 Python区分整型和浮点型依靠的是小数点,有小数点就是浮点型. e记法:e就是10的意思,是一种科学的计数法,15000=1.5e4 布尔类型是一种特殊的整形,true就相当于1,false相当于0,可以用来计算 类型转换 转换:整数:int();字符串:str();浮点数:float() 转换例子:(图9) 如果用内置函数当变量名,比如str=123,一旦被赋值,再使用这个函数会被报错. type()函数可以明确告诉我们变量类型. isinstance