react 属性与状态学习笔记

知识点：
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:

react.js
JSXTransformer.js

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

console-polyfill.js
es5-sham.min.js
es5-shim.min.js
jquery.min.js

基础知识点：

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

转载于:https://www.cnblogs.com/baiyygynui/p/5286361.html

react 属性与状态学习笔记相关推荐

React Native v0.55 学习笔记1
React Native v0.55 学习笔记1 学习内容来自官网文档0.55版本 RN 是基于 React 的思想,相比于 web 的一些组件,RN 使用的是基于原生( android.ios )的 ...
React属性与状态
React属性与状态属性和状态作为组件之间数据流动的途径. 单向数据流单向数据流:更新 DOM 的数据总是从顶层流下来,用户事件不直接操作 DOM,而是操作顶层数据.这些数据从顶层流下来同时更新了 ...
react取消捕获_React学习笔记（三）
React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处理(16.3之后) 初始化 ...
React Native跨平台开发学习笔记
App的分类(按开发方式) 大致可以分为这3种: native app(原生app:ios或安卓)原生应用程序原生应用程序外观和运行起来(性能)是最佳的.可以访问本地资源,开法成本高.发布审核周期长 ...
《深入react技术栈》学习笔记（一）初入React世界
前言以<深入学习react技术栈>为线索,记录下学习React的重要知识内容.本系列文章没有涵盖全部的react知识内容,只是记录下了学习之路上的重要知识点,一方面是自己的总结,同时拿出 ...
React官方文档学习笔记（二）
深入 JSX 在运行时选择类型错误 import React from 'react'; import { PhotoStory, VideoStory } from './stories';con ...
react简书项目学习笔记38如何拿到页面的输入值
通过ref属性把输入值存起来,然后在函数中传参 //存值<Input placeholder='密码' type='password' ref={(input) => { this.pas ...
LabView学习笔记（八）：属性节点
Labview学习笔记: LabView学习笔记(一):基础介绍 LabView学习笔记(二):滤波器实验 LabView学习笔记(三):基本控件 LabView学习笔记(四):动态数据类型 LabV ...
LabView学习笔记（三）：基本控件
Labview学习笔记: LabView学习笔记(一):基础介绍 LabView学习笔记(二):滤波器实验 LabView学习笔记(三):基本控件 LabView学习笔记(四):动态数据类型 LabV ...
LabView学习笔记（十）：条件结构
Labview学习笔记: LabView学习笔记(一):基础介绍 LabView学习笔记(二):滤波器实验 LabView学习笔记(三):基本控件 LabView学习笔记(四):动态数据类型 LabV ...

react 属性与状态学习笔记

react 属性与状态学习笔记相关推荐

最新文章

热门文章

react 属性与状态 学习笔记

react 属性与状态 学习笔记相关推荐

最新文章

热门文章

react 属性与状态学习笔记

react 属性与状态学习笔记相关推荐