React 属性和状态的一些总结

最新推荐文章于 2025-12-02 14:48:32 发布

转载最新推荐文章于 2025-12-02 14:48:32 发布 · 58 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daomul/p/4853637.html

文章标签：

#javascript #ViewUI

本文详细介绍了React中组件的属性和状态的使用方法，包括属性的三种设置方式、状态的初始化及更新方法，并通过示例代码展示了如何在实际项目中应用这些概念。

一、属性

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

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

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

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

　　　　var props = {

　　　　　　one :”123”,

　　　　　　tow :321

　　　　}

　　　　增加三个引号相当于这里面拿到两个属性了（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 + " \n 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>