再次来回顾下 :
组件化编码两步走：
- 1、定义组件（两种方式）
- 2、渲染组件标签
组件的三大属性之 state 属性（最重要的属性）
state基础（最重要的属性）
- state是组件对象最重要的属性，其值是对象，即可以包含多个数据
- 可以通过更新组件的state来更新对应的页面的显示（重新进行组件渲染）
state 操作
- 初始化状态
constructor(props){ super(props) this.state = { //this是一个组件对象 stateProp1: value1, stateProp2: value2 } }
- 读取某个状态值
this.state.statePropertyName
- 更新状态，组件界面更新
this.setState({ stateProp1: value1, stateProp2: value2 })
state属性示例–监听点击事件，然后状态改变
1、定义组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> class Myname extends React.Component { constructor (props) { //调用父类的构造函数 super(props) //1、初始化状态——固定写法 this.state = { isMyname: true } //[注意]将新增的方法中的this强制绑定为组件对象_bind()方法产生一个与handleClick()一样的方法 this.change = this.change.bind(this) } //新增自定义方法:内部的this默认不是组件对象，而是undefined change () { //3、更新状态 //需要让this指向组件对象 this.setState({ isMyname: !this.state.isMyname }) } //重写组件类方法 render () { const text = this.state.isMyname ? '我是ImagineCode' : '我是嘻嘻嘻' return <h2 onClick={this.change}>{text}</h2> } } ReactDOM.render(<Myname />, document.getElementById('test')) </script> </body> </html>
组件的三大属性之 props 属性
作用
- 复用
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test1"></div> <div id="test2"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script src="../js/prop-types.js"></script> <script type="text/babel"> // 1、定义组件:方式1 function Person(props) { return ( <ul> <li>name：{props.name}</li> <li>age：{props.age}</li> <li>sex：{props.sex}</li> </ul> ) } //方式2：使用类方式定义组件（运行时请将其中一个方式注释） 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> ) } } //指定默认值 Person.defaultProps = { name:'imaginecode', age: 17, sex:'woman' } //指定属性值的类型和必要性--使用prop-types.js库 Person.propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number.isRequired, } // 2、渲染组件标签 const p1 = { name:'imaginecode', age: 19, sex:'man' } ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1')); /* ...的作用，一种语法糖(简洁写法) 1、打包 如，function fn(...as) {} fn(1,2,3); //将1，2，3放入as作为数组 2、解包 const arr1 = [2,3,4]; const arr2 = [1,...arr1,5]; */ // ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />,document.getElementById('test1'));//作用等同上面的写法 const p2 = { name:'imaginecode2' } ReactDOM.render(<Person name={p2.name}/>,document.getElementById('test2')); </script> </body> </html>
- 为组件指定默认属性值，组件属性defaultProps：
Person.defaultProps = {name:''}
- 对props中的属性值进行类型限制和必要性限制,组件属性propTypes：
15.5版本后需要引入prop-types库
Person.propTypes = { name:PropTypes.string.isRequired, age:PropTypes.number.isRequired }
组件的三大属性之 refs 属性
- ref用于标识组件内部某个元素
- refs 是标识集合
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="test1"></div> <div id="test2"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script src="../js/prop-types.js"></script> <script type="text/babel"> //1、定义组件 class InputComp extends React.Component { constructor(props) { super(props) //记住：先对自定义函数进行bind操作 this.showInput = this.showInput.bind(this); this.handleBlur = this.handleBlur.bind(this); } showInput(event) { console.log(this); alert(this.inputVal.value); } handleBlur(event) {//利用所有的事件均有一个event属性 alert(event.target.value); } render() { return( //this.inputVal=input 将当前input绑定到组件对象上。input代表当前这个input元素 <div> <input type="text" ref={input => this.inputVal=input}/> <button onClick={this.showInput}>点击获取值</button> <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/> </div> ) } } //2、渲染组件标签 ReactDOM.render(<InputComp />,document.getElementById('test1')); </script> </body> </html>
小结组件属性
props 和 state 对于一个组件来讲都是数据的来源，而 state 又可以通过 props 传递给子组件，这像是一个鸡生蛋蛋生鸡的问题：到底谁是数据的源头 ？答案是 state，而且是广义的 state：它可以是 react 组件树中各级组件的 state，也可以是 react 组件树外部由其他 js 数据结构表示的 state。归根结底，props 是用来传导数据的，而 state 是数据改变的源泉。
- props 来自外部属性
- states 来自内部状态
- refs 用于表示组件内某个元素
