介绍
特性:
- 声明式
- 组件化
- 灵活:支持单/多页面,服务端渲染,RN-App.
编写hello,world
cdn引入
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
note:前两个必须要,babel用于解析es6语法。
npm引入
如果插件拉取失败,可以npm获取,src改成文件路径名。
基本语法
- ReactDOM.render():渲染组件:1.插入哪个标签,多个需用包裹父标签2.插到哪
- ReactDOM.createElement():创建元素:1.标签名,2.标签属性,3.默认值
- ReactDOM.Component:创建组件
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
<!-- ... 其它 HTML ... -->
<div id="app"></div>
<script>
var hello = ReactDOM.createElement('h1',{},"hello world");
ReactDOM.render(hello,document.getElementById('app'));
</script>
</body>
</html>
jsx介绍
概念:js中编写html代码
ReactDOM.render(
<h1>hello,world</h1>
,document.getElementById('app'));
- 样式里面的class要用className
- 引入直接用大括号
元素渲染
元素发生变化时,对比后渲染差异部分。
单向绑定,可获取状态。
组件和props
React…creactClass():早期,已废弃- 函数式组件:无状态
- React.Component
操作:
函数式:
function hello(props){
return
<div>
<h1> 111111{props.name}</h1>
<p>年龄:{props.age}</p>
</div>
}
ReactDOM.render(<hello name = "jack" , age = "30"/>,document.getElementById('app'));
继承式:
class hello extends React.Component{
render(){
return
<div>
<h1> 111111{this.props.name}</h1>
<p>年龄:{this.props.age}</p>
</div>
}
}
ReactDOM.render(<hello name = "jack" , age = "30"/>,document.getElementById('app'));
生命周期
四个阶段:
- 组件初始化阶段
- 组件加载阶段
- 数据更新阶段
- 组件销毁阶段
class hello extends React.Component{
constructor(props){
//初始化props,对应属性
super(props);
//初始化状态
this.state = {
name : 'jack',
age: 30
}
}
//组件加载阶段
componentWillMount(){
//组件加载前
}
componentDidMount(){
//组件加载后
}
//------
updateUser=()=>{
//this.state.name = 'Tim';错误!不会触发render
this.setState({
name : 'Tim',
age:32
})
}
//数据更新
shouldComponentUpdate(){//数据是否需要更新
return true;//返回真则更新
}
componentwillUpdate(){
//数据将要更新
}
componentDUpdate(){
//数据已经更新
}
render(){
//组件加载或者数据更新
return
<div>
<h1> 111111{props.name}</h1>
<p>年龄:{props.age}</p>
<button onClick = {this.updateUser}>按钮</button>
</div>
}
}
ReactDOM.render(<hello name = "jack" , age = "30"/>,document.getElementById('app'));
事件处理
- 箭头函数
- 构造函数里bind绑定this
- 绑定事件时
onclick = {()=>this.updateUser}
onClick = {this.updateUser.bind(this)}
点击button改变值
列表渲染
class List extends React.Component{
state = {
list : [1,2,3,4,5]
}
render(){
const arr = this.state.list;
const listItem = []
arr.map((item)=>{
let li = <li>{item}</li>;
listItem.push(li);
})
return <div>
<ul>
{listItem}
</ul>
</div>
}
}
ReactDOM.render(<List/>,document.getElementById('app'));
列表应用
class List extends React.Component{
state = {
val : '',
list : [1,2,3,4,5]
}
handleInput = (event,index)=>{
this.setState({
val : event.target.value;
})
}
handleAdd = ()=>{
// const val = this.state.val;
// const list = this.state.list;
const {val,list} = this.state;
list.push(val);
this.setState({
list//list : list,key 和valuey一样时可以省略key
//数据发生变化必须及时set更改
})
}
render(){//setState 就会执行
const val = this.state.value;
const arr = this.state.list;
const listItem = []
arr.map((item)=>{
let li = <li key={index}>{item}</li>;
listItem.push(li);
})
return <div>
<div>
<input type="text" value ={val} onChange = {this.handleInput}/>
<button onClick = {this.handleAdd}>添加</button>
</div>
<ul>
{listItem}
</ul>
</div>
}
}
ReactDOM.render(<ToDoList/>,document.getElementById('app'));