Flask接口签名sign原理与实例代码浅析
183
2023-06-28
浅谈React 属性和状态的一些总结
一、属性
1、第一种使用方法:键值对
2、第二种方法:三个点的展开对象形式
var props = {
one :”123”,
tow :321
}
增加三个引号相当于这里面拿到两个属性了(one和two)
3、setProps形式:通过组件更新属性,不能在组件内部中修改属性的,因为会违背组件设计原则(尽量避免)
var instance =React.render(
instance.setProps({name:”Tom" });
二、状态:事物所处的TZbolxa状况,由事物自行处理不断变化/事物的私有属性
getInitialState:初始化每个实例特有的状态
setState:更新组件状态
setState会触发diff算法:判断state和页面结果的区别,是否需要更新
三、状态和属性对比
状态和属性都会触发render更新,都是纯js对象
状态:是和自己相关的,既不受父组件也不受子组件影响
属性:本身是不能自己去修改的,只能从父组件获取属性,父组件也能修改它的属性
根本的区别:组件在运行时需要去修改维护的就是状态
四、简单的demo熟悉一下:
2
3
4
5
6
7
8
9
//内容组件
var Content = React.createClass({
getInitialState:function(){
return {
inputText:'',
};
},
handleChange:function(event){
this.setState({inputText:event.target.value});
},
handleClick:function(){
console.log("props name is " + this.prohttp://ps.selectName + " \n and inputText is " + this.state.inputText);
},
render:function(){
return
},
});
//评论组件
var Comment = React.createClass({
getInitialState:function(){
return {
names:["Tom","Axiba","daomul"],
selectName:'',
};
},
handleSelect:function(){
this.setState(
{selectName : event.target.value}
);
},
render:function(){
var options = [];
//往options中添加子option
for (var option in this.state.names) {
options.push()
};
return
{options}
},
});
//start render
React.render(
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~