zoukankan      html  css  js  c++  java
  • React 属性和状态的一些总结

     

    一、属性

      1、第一种使用方法:键值对

         <ClaaNameA name = “Tom” />

        <ClaaNameA name = {Tom} />

        <ClaaNameA name = {“Tom”} />

        <ClaaNameA name = {[1,2,3]} />//数组

        <ClaaNameA name = {FunctionNAme} /> //定义一个函数

     

      2、第二种方法:三个点的展开对象形式

        var props = {

          one :”123”,

          tow :321

         }

        <ClassNameB {…props} />

        增加三个引号相当于这里面拿到两个属性了(one和two)

     

      3、setProps形式:通过组件更新属性,不能在组件内部中修改属性的,因为会违背组件设计原则(尽量避免)

         var instance =React.render(<ClassNameC ><ClaasNameC/>,document.body);

        instance.setProps({name:”Tom" });

     

    二、状态:事物所处的状况,由事物自行处理不断变化/事物的私有属性

      getInitialState:初始化每个实例特有的状态

      setState:更新组件状态

      setState会触发diff算法:判断state和页面结果的区别,是否需要更新

     

    三、状态和属性对比

      状态和属性都会触发render更新,都是纯JS对象

      状态:是和自己相关的,既不受父组件也不受子组件影响

      属性:本身是不能自己去修改的,只能从父组件获取属性,父组件也能修改它的属性

      根本的区别:组件在运行时需要去修改维护的就是状态

    四、简单的demo熟悉一下:

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
     5     <title>daomul's example</title>
     6     <link rel="stylesheet" href="../shared/css/base.css" />
     7   </head>
     8   <body>
     9     <h1>Text demo</h1>
    10     <div id="container">
    11 
    12     </div>
    13 
    14     <script src="../shared/thirdparty/es5-shim.min.js"></script>
    15     <script src="../shared/thirdparty/es5-sham.min.js"></script>
    16     <script src="../shared/thirdparty/console-polyfill.js"></script>
    17     <script src="../../build/react.js"></script>
    18     <script src="../../build/JSXTransformer.js"></script>
    19     <script type="text/jsx">
    20 
    21         //内容组件
    22         var Content = React.createClass({
    23           getInitialState:function(){
    24             return {
    25               inputText:'',
    26             };
    27           },
    28           handleChange:function(event){
    29             this.setState({inputText:event.target.value});
    30           },
    31           handleClick:function(){
    32             console.log("props name is " + this.props.selectName + " 
     and inputText is "  + this.state.inputText);
    33           },
    34           render:function(){
    35 
    36             return <div>
    37               <textarea onChange = {this.handleChange} placeholder = "please input something!"></textarea>
    38               <button onClick = {this.handleClick}>sumbit</button>
    39             </div>;
    40           },
    41         });
    42 
    43         //评论组件
    44         var Comment = React.createClass({
    45           getInitialState:function(){
    46             return {
    47               names:["Tom","Axiba","daomul"],
    48               selectName:'',
    49             };
    50           },
    51           handleSelect:function(){
    52             this.setState(
    53                 {selectName : event.target.value}
    54               );
    55           },
    56           render:function(){
    57             var options = [];
    58             //往options中添加子option
    59             for (var option in this.state.names) {
    60               options.push(<option value={this.state.names[option]}> {this.state.names[option]}  </option>)
    61             };
    62             return <div>
    63               <Content selectName = {this.state.selectName}>
    64               </Content>
    65               <select onChange = {this.handleSelect}>
    66                 {options}
    67               </select>
    68             </div>;
    69           },
    70         });
    71 
    72         //start render
    73         React.render(<Comment></Comment>,document.body);
    74     </script>
    75   </body>
    76 </html>
  • 相关阅读:
    GoCN每日新闻(2019-11-03)
    GoCN每日新闻(2019-11-02)
    GoCN每日新闻(2019-11-01)
    GoCN每日新闻(2019-10-31)
    GoCN每日新闻(2019-10-30)
    GoCN每日新闻(2019-10-29)
    xms西软预定列表-房类市场
    GoCN每日新闻(2019-10-28)
    GoCN每日新闻(2019-10-27)
    GoCN每日新闻(2019-10-26)
  • 原文地址:https://www.cnblogs.com/daomul/p/4853637.html
Copyright © 2011-2022 走看看