1. 引入文件
- 固定顺序
<script src="../文件/react.development.js"></script>
<script src="../文件/react-dom.development.js"></script>
<script src="../文件/browser.min.js"></script>
//browser编译jsx语法
//JSX当中的表达式要包含在大括号里
<script type="text/babel">
//code
</script>
2. render
render方法有两个参数 第一个参数是要插入的内容，第二个是挂载元素 jsx 表达式要使用{}
ReactDOM.render(
<h1> hello world </h1>,
document.getElementById('app')
)
3. 模块化
- 模块 向外提供特定功能的js程序，一般就是一个js文件作用：复用js，简化js的编写，提高js运行效率
- 组件 用来实现特定（局域）功能效果的代码集合（html/css/js）作用：复用编码，简化项目编码，提高运行效率
- 模块化 当应用的js都以模块来编写的，这个应用就是一个模块化的应用组件化 当应用是一多组件的方式实现，这个应用就是一个组件化的应用
4. 组件
- 组件特点：可组合（Composeable）、可重用（Reusable）、可维护（Maintainable）
- 优点：提高代码复用率、降低测试难度、降低代码复杂度
- 函数式
- 无状态
const Welcome = () => {
return <h1>hello world</h1>
}
ReactDOM.render(
<Welcome></Welcome>,
document.getElementById('app')
)
- class定义一个组件
- 有状态
- 有生命周期
class Com extends React.Component{
render(){
return(
<h1>hello world</h1>
)
}
}
ReactDOM.render(
<Com></Com>,
document.getElementById('app')
)
5. 父子组件传值
- 函数式只能接受参数+展示
- class可接收参数并修改
- props父传值不能改变，state可以实现交互
- 函数传参
const Com = (props) => {
return (
<div>
<span>{props.name}</span>//指向父元素传递内容
</div>
)
}
ReactDOM.render(
<Com name="1234567"></Com>,
document.getElementById('app')
)
- class传参
class Com extends React.Component{
render(){
return(
<h1>{this.props.name}</h1>//this指向实例化对象
)
}
}
ReactDOM.render(
<Com name="1234567"></Com>,
document.getElementById('app')
)
- 组件中slot
class Com extends React.Component{
render(){
return(
<h1>{this.props.name}</h1>
{this.props.children}
)
}
}
ReactDOM.render(
<Com name="1234567">
<p>1234</p>
</Com>,
document.getElementById('app')
)
6. state
- state是组件对象最重要的属性，值是对象（可以包含多个数据），用于改变组件内通状态的值（动态的）
1. 初始化状态
class InputTpl extends React.Component{
constructor(params){
super(params)
this.state = {
count:1
}
}
}
2. 读取某个状态值
this.state.count
3. 更新状态->组件界面更新
- 组件更新使用setState
- 不可直接修改，深拷贝后赋值
add(value){
let todo = [...this.state.todo]
todo.push({
name:value,
isA:false,
id:new Date().getTime()
})
this.setState({
todo,
list:todo
})
}
4. this
- 自定义函数内部无法拿到this，需要在构造函数中bind
constructor(params){
super(params)
this.change = this.change.bind(this)
}
7. props VS state
- props是不可变的，而state可以根据与用户交互来改变
- props用于组件通信进行传值
- state用于改变组件内容状态的值（动态的）
8. refs
- 组件内的标签都可以定义ref属性来标识自己
1. ref
<input type="text" ref={input => this.myInput = input}/>
- 得到对应的真实DOM元素
console.log(this.myInput.value)
2. refs
<input type="text" ref="name"/>
- 得到对应的真实DOM元素
console.log(this.refs.name.value)
推荐方法一
9. 双向数据绑定
- 使用event.target事件对象来更新react中的数据状态
- 给输入框添加onChange事件（js驼峰式）
<input type="text" onChange={this.handleChange} />
<p>{this.state.username}</p>
handleChange = (event) => {
this.setState({
username: event.target.value
})
}
// 初始化数据
this.state = {
form: {
invite: '',
nickname: '',
username: '',
password: ''
},
}
// 给输入框绑定事件
<input type="text" onChange={this.handleChange.bind(this, 'invite')}/>
<input type="text" onChange={this.handleChange.bind(this, 'nickname')}/>
<input type="text" onChange={this.handleChange.bind(this, 'username')}/>
<input type="text" onChange={this.handleChange.bind(this, 'password')}/>
// 编写事件方法
handleChange = (key, event) => {
let form = this.state.form
for (let item in this.state.form) {
if (item === key) {
form[item] = event.target.value
this.setState({form: form})
}
}
}
10. 生命周期
1. initialization 组件初始化
- 获取数据
- constructor()
2. componetWillMount 组件即将渲染
3. render 组件渲染
4. componetDidMoun 组件渲染完成
5. componentWillReceiveProps(nextProps) props是否改变
- props引起的组件更新过程
