react 属性与状态 学习笔记

Posted 2020-06-24 礼拜16

知识点：
1、react 属性的调用 this.props.被调用的属性名

设置属性的常用方法：
var props = {
one: ‘123‘,
two: 321
}
调用这个属性：
<HelloWorld {...props} />

说明：{...props}，这里的三个点，代表props中的所有的属性

react 状态的调用 this.state

this.getInitialState 默认状态的方法；
this.setState 修改状态的方法（经常用到）

this.setState.被修改的值

场景：修改默认属性名称name的值，并显示效果

1、初始化状态，默认状态
getInitialState: function(){
return {
name: ‘tim‘,
}
}

2、改变状态，就会改变默认的值。给这个默认的值添加修改后获取元素的监听事件 event.target 只要默认值被改变，就会获取到这个改变后的值
handChange: function(event){
this.setState({name: event.target.value});
}

3、调用这个已经改变的状态的属性，显示已经改变的状态
render: function(){
return <p> HelloWorld,改变的值为{this.props.name} </p>
}

 

基础知识点：

• 必须引入的js:

1. react.js
2. JSXTransformer.js

• 兼容旧版本浏览器（可选）

1. console-polyfill.js
2. es5-sham.min.js
3. es5-shim.min.js
4. jquery.min.js

• 基础知识点：

1. react 的默认的解析数据，生成JSX代码的方法：   render: function(){......}
2. 渲染组件的方法：   React.render( JSX的代码块 , JSX代码渲染后的存储位置（展示效果的位置）)
3. JSX(javascript Xml)  是在JS中编写XML的语言，官方文档：https//facebook.giuhub.io/jsx/
4. JSX   首字母大写为自定义组件；首字母小写为DOM元素
5. JSX   要注意3个点：元素名、子节点、节点属性
6. 所有的html属性与class名称都采用驼峰命名方式：html要写成“htmlFor”;      class要写成"className";   否则会报错
7. 写在style标签中的css样式，在react中要以对象的方式引用    <div style = {style}></div>
8. {}大括号里不可以使用javascript的语句，但可以使用表达式。用表达式来代替语句。
9. script标签的type为text/jsx