标签：状态 状态机 als prope turn ring type java nbsp
一：入门
1：chrome如何安装React dev Tools
https://blog.csdn.net/gezilan/article/details/79741578 React工具的安装
2：Hello React
const vDom = <h1>Hello React</h1> // 千万不要加引号
// 渲染虚拟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 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
// debugger
// 2. 渲染到真实页面
ReactDOM.render(vDOM2, document.getElementById(‘test2‘))
4:组件化编程
/*方式1: 工厂函数组件(简单组件)*/
function MyComponent () {
return <h2>工厂函数组件(简单组件)</h2>
}
/*方式2: ES6类组件(复杂组件)*/
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2的实例对象
return <h2>ES6类组件(复杂组件)</h2>
}
二：组件的三大属性
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 <h2 onClick={this.Change}>{this.state.isLikeMe?"我喜欢你":"我不喜欢你"}</h2>
}
}
//渲染组件
ReactDOM.render(<Like/>,document.getElementById("example"))
2: props属性
(1) 每个组件对象都会有props(properties的简写)属性
(2) 组件标签的所有属性都保存在props中
2 作用
(1) 通过标签属性从组件外向组件内传递变化的数据
(2) 注意: 组件内部不要修改props数据
class Person extends React.Component{
render(){
return (
<ul>
<li>name:{this.props.name}</li>
<li>age:{this.props.age}</li>
<li>sex:{this.props.sex}</li>
</ul>
)
}
}
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(<Person {...p1}/>,document.getElementById("example1"))
ReactDOM.render(<Person />,document.getElementById("example2"))
问题: 请区别一下组件的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 (
<div>
<input ref="content" type="text"/>
<button onClick={this.Showinput}>点我</button>
<input type="text" placeholder="失去焦点" onBlur={this.HandleBlur}/>
</div>
)
}
}
ReactDOM.render(<Mycompent/>,document.getElementById("example"));
标签：状态 状态机 als prope turn ring type java nbsp
原文地址：https://www.cnblogs.com/love-life-insist/p/10207338.html
