一：入门
1：chrome如何安装React dev Tools
https://blog.csdn.net/gezilan/article/details/79741578 React工具的安装
2：Hello React
const vDom =
Hello React
// 千万不要加引号// 渲染虚拟DOM到页面真实DOM容器中
ReactDOM.render(vDom, document.getElementById('test'))
3：
1. 创建虚拟DOM
/*方式一: 纯JS(一般不用)创建虚拟DOM元素对象*/
const msg = 'I Like You!'
const myId = test
const vDOM1 = React.createElement('h2', {id: myId}, msg.toUpperCase())
// 2. 渲染到真实页面
const domContainer = document.getElementById('test1')
// debugger
ReactDOM.render(vDOM1, domContainer)
// 1. 创建虚拟DOM
/*方式二: JSX创建虚拟DOM元素对象*/
const vDOM2 =
{msg.toLowerCase()}
// debugger
// 2. 渲染到真实页面
ReactDOM.render(vDOM2, document.getElementById('test2'))
4:组件化编程
/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {
return
工厂函数组件(简单组件)
}
/*方式2: ES6类组件(复杂组件)*/
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2的实例对象
return
ES6类组件(复杂组件)
}
二：组件的三大属性
1: state属性
一：概念理解
(1) state是组件对象最重要的属性, 值是对象(可以包含多个数据)
(2) 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
二．编码操作
(1) 初始化状态:
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
(2) 读取某个状态值
this.state.statePropertyName
(3) 更新状态---->组件界面更新
this.setState({
stateProp1 : value1,
stateProp2 : value2
})
class Like extends React.Component{
constructor(props){
super(props)
this.state = {
isLikeMe : false
}
this.Change = this.Change.bind(this)
}
Change(){
//点击的时候执行这个方法
//设置状态数值
const isLikeMe = !this.state.isLikeMe
this.setState({
isLikeMe
})
}
render(){
//执行渲染
return {this.state.isLikeMe?"我喜欢你":"我不喜欢你"}
}
}
//渲染组件
ReactDOM.render(
2: props属性
(1) 每个组件对象都会有props(properties的简写)属性
(2) 组件标签的所有属性都保存在props中
2 作用
(1) 通过标签属性从组件外向组件内传递变化的数据
(2) 注意: 组件内部不要修改props数据
class Person extends React.Component{
render(){
return (
- name:{this.props.name}
- age:{this.props.age}
- sex:{this.props.sex}
)
}
}
const p1 = {
name : "小名",
age : 20,
sex : "男"
}
Person.propTypes = {
name:PropTypes.string.isRequired,
age:PropTypes.number.isRequired,
sex:PropTypes.string.isRequired
}
Person.defaultProps = {
name: 'Stranger',
age : 20,
sex : "男"
};
ReactDOM.render(
问题: 请区别一下组件的props和state属性
1) state: 组件自身内部可变化的数据
2) props: 从组件外部向组件内部传递数据, 组件内部只读不修改
3: refs与事件处理
class Mycompent extends React.Component{
constructor(props){
super(props)
this.Showinput = this.Showinput.bind(this)
this.HandleBlur = this.HandleBlur.bind(this)
}
Showinput(){
//点击的时候弹出 content数值
const input = this.refs.content; //获取到input元素//类似于dom的标识
alert(input.value)
}
HandleBlur(event){
//event.target表示触发的这个元素
alert(event.target.value)
}
render(){
return (
)
}
}
ReactDOM.render(