React
1、cdn引入js
2、js
3、jsx
4、操作内容、属性、样式、事件
5、条件渲染
三元运算符 也可显示标签，一行可简写，不在标签外加括号
if-else 语句需要定义在外面
方法里也支持jsx写法
6、列表渲染
7、组件
自定义组件，有函数组件/类组件，利用props进行传参
8、state--操作组件内部数据
在新的版本中，state可以定义在constructor外，类似于data
9、todolist应用
1、获取构造数据里的值打印
react中的this对象需用bind绑定--改变this指向，可以直接打印this来看，
传参直接写在方法的括号内，this后面
四种写法，推荐第四种，定义方法时用箭头函数
推荐写法如下，带传参需再用箭头函数
2、响应式 --this.setState
完整应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>todolist应用</title>
<script src="./lib/react.development.js"></script>
<script src="./lib/react-dom.development.js"></script>
<script src="./lib/babel.js"></script>
</head>
<style>
.g-add {
width: 300px;
}
.g-list {
width: 350px;
display: flex;
justify-content: space-between;
align-items: center;
}
.g-delate {
width: 50px;
height: 30px;
}
</style>
<body>
<div id="app">
</div>
<script type="text/babel">
class Todolist extends React.Component {
constructor() {
super()
this.state = {
inputValue: '',
list: [
{ id: 1001, name: 'javascript高级编程', state: false },
{ id: 1002, name: 'vue高级编程', state: false },
]
}
}
render() {
return (
<div>
<h2>todolist应用</h2>
<input className='g-add' type="text" placeholder='请输入书名' value={this.state.inputValue} onChange={this.bindInputValue} />
<button onClick={this.bindAdd} onKeyup={this.bindAdd}>添加</button>
{
this.state.list.map((item, index) => (
<div className='g-list' key={item.id}>
<input type="checkbox" onChange={() => { this.bindChecked(item.id) }
} />
<p>{item.id}-{item.name}</p>
<button className='g-delate' onClick={() => this.bindDelete(index)}>删除</button>
<p>{item.state ? '选中' : '未选中'}</p>
</div>
))
}
</div>
)
}
bindInputValue = (e) => {
let inputValue = e.target.value
this.setState({ inputValue })
}
bindAdd = () => {
if (this.state.inputValue !== '') {
let list = this.state.list
list.push({
id: Math.floor(Math.random() * (9999 - 1000) + 1000),
name: this.state.inputValue,
state: false
})
this.setState({ list, inputValue: '' })
} else {
alert('书名不能为空')
return
}
}
bindDelete = (index) => {
let list = this.state.list
list.splice(index, 1)
this.setState({ list })
}
bindChecked = (id) => {
let list = this.state.list
let item = list.find(item => item.id === id)
item.state = !item.state
this.setState({ list })
}
}
ReactDOM.render(<Todolist />, document.getElementById('app'))
</script>
</body>
</html>
