Angulatr和React都是针对单页开发
两者的表达式的区别:react是单括号,Angular双{{}}
1. 支持ES6的语法
2. 出身:Facebook
2. 下载:如果安装了babel,直接添加react
3. Ant-Design
引入:
import React from "react";//引入虚拟节点 import ReactDOM from "react-dom";//引入真实节点 import "./theme/theme.css";//引入css样式表
React操作虚拟节点,ReactDOM操作真实节点
//创建一个虚拟节点h1Ele
var h1Ele = React.createElement("h1",{},"hello word");
//将虚拟节点添加到rApp节点中去
ReactDOM.render(h1Ele,app);
优势:
ES5 来定定义组件
var Wrap = React.createClass({ render() { return ( <div> <AddTodo /> <TodoList /> </div> ); } }) var AddTodo = React.createClass({ render() { return ( <div><input type="text" /><input type="button" value="addTodo" /></div> ); } }); var TodoList = React.createClass({ render() { return ( <ul> <li>HTML</li> <li>CSS</li> </ul> ); } }) ReactDOM.render(<Wrap />, app)
ES6用class来定义组件
组件并不是真实的DOM节点,而是存在内存之中的一种数据结构,叫虚拟DOM。
只有插入文档之后(ReactDOM.render()),才会变成真实的DOM。
- DOM diff算法:根据React的设计,所有的DOM变动,都先在虚拟DOM上发生,然后再将实际发生的变动,反映在真实的DOM上。
- DOM diff 优势:可以相对的极大的提高页面的性能表现。
【注意】:
1. 两类组件:容器组件Wrap、展示组件<AddTodo><TodoList>
2. react是单向的数据流,只能从父级传到子类:props来传递
3. 两个特性:
//ES6语法
class Wrap extends React.Component{ constructor(props){ super(props); } render(){ return ( <div> <AddTodo /> <TodoList /> </div> ); } } class AddTodo extends React.Component{ constructor(props){ super(props); } render(){ return ( <div><input type="text" /><input type="button" value="AddTodo" /></div> ); } } class TodoList extends React.Component{ constructor(props){ super(props); }; render(){ return ( <ul> <li>HTML</li> <li>CSS</li> </ul> ) } } ReactDOM.render(<Wrap />,app)
## 计数器
初始化数据getInitialState:
getInitialState(){
return {
count:9
};
},
### this.state
组件免不了要跟用户交互,React的一大创新,就是将组件看成一个状态机,一开始就有一个初始状态,然后用户互动,导致状态改变,从而触发重新渲染UI
触发render更新的两种方式:(状态数据在state上)
- this.forceUpdate()会触发render的更新
- this.setState({ count:++this.state.count })也会触发render的更新
以上两这描述组件的特性,都可以保存数据。两者可能会产生混淆
区分:
this.props:是一旦指定,便不可更改的特性,一般用于传递数据
this.state:可变,私属于当前,会随着用户互动而产生变化
### 获取真实的DOM节点 --ref属性
## React 不要在原来的数据上做修改,做数据追踪,用于判断修改前与修改后的区别