react 动态添加组件属性_react基础

基础认识

• 官网
• 特点
• 声明式编程
• 组件化
• 支持客户端和服务端渲染
• 高效
• 虚拟DOM，不总是直接操作DOM，只是减少DOM的操作,操作虚拟DOM不会对页面进行重绘，当渲染的时候，才会进行渲染
• DOM Diff 算法，最小化页面重绘，就是当页面变化时，通过计算那部分需要重绘，只重绘当前部分，减少页面的重绘区域
• 单向数据流
• js文件
• react.js：react的核心库
• react-dom.js：提供操作DOM的react扩展
• babel.js：解析jsx语法

JSX

• react提供了创建虚拟DOM的方法
• 虚拟DOM对象最终都会被react转换为真实的DOM
• 编码时，只需要操作react的虚拟DOM相关数据，react会转换为真实DOM变化而更新界面

// react直接操作和JSX操作对比复制代码

• 动态渲染一个列表
• 使用数组的Map函数返回所需要的列表内容

let arrs = [111,222,333,444]// 创建虚拟DOM const ul = ( 

• { arrs.map((name,index) =>
• {name}) }

)// 渲染虚拟DOM ReactDOM.render(ul, document.getElementById('app1'))复制代码

组件

• 工厂函数创建组件
• 使用工厂函数的效率比使用class高，因为工厂函数中不需要创建一系列的对象之类的
• 当组件有状态(state)的时候就不适合使用了

// 工厂函数创建组件function MyCom(){ return 

工厂函数创建组件

} // 渲染组件标签// 必须这么写// 这么写是错误的ReactDOM.render(,document.getElementById('app'))复制代码

• class创建组件

// class定义组件class MyCom2 extends React.Component{ render(){ return 

class定义组件

}}// 渲染组件标签// 必须这么写// 这么写是错误的ReactDOM.render(,document.getElementById('app'))复制代码

组件三大属性

state

• state是组件对象的最重要的属性之一，值是一个对象，这个对象可以包含多个数据
• 组件被称为状态机，通过更新组件的state来更新对应的页面显示，就是通过state来控制组件的重新渲染(重绘)
• 初始化状态

constructor(props){ super(props) this.state = { stateProp1:value1, stateProp2:value2 }}复制代码

• 读取某个状态值

this.state.statePropertyName复制代码