1.state

只要组件有状态就无法使用工厂模式

1.1.初始化状态

  1.  constructor (props) {
  2.     super(props)
  3.     this.state = {
  4.       stateProp1 : value1,
  5.       stateProp2 : value2
  6.     }
  7.   }

1.2.读取某个状态值

  1.   this.state.statePropertyName

1.3. 更新状态——>组件界面更新

  1.  this.setState({
  2.     stateProp1 : value1,
  3.     stateProp2 : value2
  4.   })

1.4.案例

  1.  <div id="exmaple"></div>
  2.     <script src="../js/react.development.js"></script>
  3.     <script src="../js/react-dom.development.js"></script>
  4.     <script src="../js/babel.min.js"></script>
  5.     <script type="text/babel">
  6.     //定义组件类
  7.     class Like extends React.Component{
  8.         //给状态赋初值
  9.         constructor(props){
  10.             super(props)
  11.             //初始化状态
  12.             this.state={
  13.                isLikeMe:false 
  14.             }
  15.   //将新增方法的this强制绑定为组件对象，
  16.   //bind绑定this会产生新的函数，这里的this就是组件实例对象
  17.             this.handleClick=this.handleClick.bind(this)
  18.         }
  19. //新添加方法：内部的this默认不是组件对象，而是underfined
  20.         handleClick(){
  21.             //得到状态取反
  22.             const isLikeMe=!this.state.isLikeMe
  24.             //更新状态
  25.             this.setState({isLikeMe})
  26.         }
  27.         //重写组件内方法，组件内本来就有
  28.         render(){
  29.             //读取状态
  30.             const {isLikeMe}=this.state
  31.             //这里是组件对象调用这个方法
  32.             return <h2 onClick={this.handleClick}>{isLikeMe?"你喜欢我":"我喜欢你"}</h2>
  33.         }
  34.     }
  35.     //渲染标签组件
  36.     ReactDOM.render(<Like/>,document.getElementById("exmaple"))

思路：首先定义组件对象，在组件对象上定义一个属性，属性值是布尔类型，用来切换文字显示的状态，在渲染阶段给标签属性绑定一个handClick事件，这里的handleClick要大写c,因为要区分跟普通的绑定事件，在事件内对定义的属性进行修改，因为这个事件是我们自己定义的，因此，这里的this是underfined,需要进行处理，使用bind对它进行操作，改变它的this指向，在把改变后的新函数，赋值给它原先的函数。

2.props

2.1.基本使用

  1. 通过在组件上定义属性，向组件内传递数据
  2.  ReactDOM.render(<Person name='王苏' age={18} sex="男" />, document.getElementById("app"))
  3.  批量传递
  4.  const p = { name: "wx", age: "13", sex: "女" }
  5.  ReactDOM.render(<Person {...p} />, document.getElementById("app1"))

2.2.案例

  1.   <div id="app"></div>
  2.     <div id="app1"></div>
  3.     <script src="../js/react.development.js"></script>
  4.     <script src="../js/react-dom.development.js"></script>
  5.     <script src="../js/babel.min.js"></script>
  6.     <script src="../js/prop-types.js"></script>
  7.     <script type="text/babel">
  8.         class Person extends React.Component {
  9.             // constructor(name, age) {
  10.             //     super(props)
  11.             // }
  12.             render() {
  13.                 let { name, age, sex } = this.props
  14.                 return (
  15.                     <ui>
  16.                         <li>我的名字{name}</li>
  17.                         <li>我的年龄{age + 1}</li>
  18.                         <li>我的性别{sex}</li>
  19.                     </ui>
  20.                 )
  21.             }
  22.         }
  24.         //对标签属性的类型必要性进行限制
  25.         Person.propTypes = {
  26.             name: PropTypes.string.isRequired,
  27.             age: PropTypes.number,
  28.             sex: PropTypes.string
  29.         }
  30.         //指定默认的标签属性值
  31.         Person.defaultProps = {
  32.             sex: "男",
  33.             age: 19
  34.         }
  35.         //单独页面渲染
  36.         ReactDOM.render(<Person name='王苏' age={18} sex="男" />, document.getElementById("app"))
  37.         //整体渲染
  38.         const p = { name: "wx", age: "13", sex: "女" }
  39.         ReactDOM.render(<Person {...p} />, document.getElementById("app1"))

2.3.简化props

image.png

2.4.类组件中的props

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="app"></div>
  13.     <div id="app1"></div>
  14.     <script src="../js/react.development.js"></script>
  15.     <script src="../js/react-dom.development.js"></script>
  16.     <script src="../js/babel.min.js"></script>
  17.     <script src="../js/prop-types.js"></script>
  18.     <script type="text/babel">
  19.     //构造器是否接受。取决与是否希望通过this拿到props
  20.     //类中的构造器能省略就省略
  21.         class Person extends React.Component {
  22.             constructor(props){
  23.                 super(props)
  24.                 console.log(this.props)
  25.             }
  26.             //static表示定义一个静态成员，该属性直接定义在类上
  27.             //对标签属性的类型必要性进行限制
  28.             static propTypes = {
  29.                 name: PropTypes.string.isRequired,
  30.                 age: PropTypes.number,
  31.                 sex: PropTypes.string
  32.             }
  33.             //指定默认的标签属性值
  34.             static defaultProps = {
  35.                 sex: "男",
  36.                 age: 19
  37.             }
  38.             render() {
  39.                 let { name, age, sex } = this.props
  40.                 return (
  41.                     <ul>
  42.                         <li>我的名字{name}</li>
  43.                         <li>我的年龄{age+1}</li>
  44.                         <li>我的性别{sex}</li>
  45.                     </ul>
  46.                 )
  47.             }
  48.         }
  51.         //单独页面渲染
  52.         ReactDOM.render(<Person name='王苏'/>, document.getElementById("app"))
  53.     </script>
  54. </body>
  56. </html>

2.5.函数组件使用props

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="app"></div>
  13.     <div id="app1"></div>
  14.     <script src="../js/react.development.js"></script>
  15.     <script src="../js/react-dom.development.js"></script>
  16.     <script src="../js/babel.min.js"></script>
  17.     <script src="../js/prop-types.js"></script>
  18.     <script type="text/babel">
  20.         function Person(props) {
  21.             const {name,age,sex}=props
  22.             return (
  23.                 <ul>
  24.                     <li>我的名字{name}</li>
  25.                     <li>我的年龄{age + 1}</li>
  26.                     <li>我的性别{sex}</li>
  27.                 </ul>
  28.             )
  29.         }
  30.         //单独页面渲染
  31.         ReactDOM.render(<Person name='王苏' age={18} sex="男" />, document.getElementById("app"))
  32.     </script>
  33. </body>
  35. </html>

3.ref

3.1字符串类型的ref

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="app"></div>
  13.     <script src="../js/react.development.js"></script>
  14.     <script src="../js/react-dom.development.js"></script>
  15.     <script src="../js/babel.min.js"></script>
  16.     <script src="../js/prop-types.js"></script>
  17.     <script type="text/babel">
  18.         class Input extends React.Component {
  19.             inputHandle = () => {
  20.                 //通过this可以拿到refs,通过refs可以收集到虚拟dom的节点
  21.                let {value}=this.refs.input1
  22.                alert(value)
  23.             }
  24.             burHandle = () => {
  25.               let {value}=this.refs.input2
  26.               alert(value)
  28.             }
  29.             render() {
  30.                 return <div>
  31.                     <input type="text" placeholder="请输入文字" ref="input1" />
  32.                     <button onClick={this.inputHandle}>确定</button>
  33.                     <input type="text" placeholder="失去焦点弹出文字" onBlur={this.burHandle} ref="input2" />
  34.                 </div>
  35.             }
  36.         }
  37.         ReactDOM.render(<Input />, document.getElementById("app"))
  38.     </script>
  39. </body>
  41. </html>

3.2回调函数的ref

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="app"></div>
  13.     <script src="../js/react.development.js"></script>
  14.     <script src="../js/react-dom.development.js"></script>
  15.     <script src="../js/babel.min.js"></script>
  16.     <script src="../js/prop-types.js"></script>
  17.     <script type="text/babel">
  18.         class Input extends React.Component {
  19.             inputHandle = () => {
  20.                 //通过this可以拿到refs,通过refs可以收集到虚拟dom的节点
  21.                 let { input } = this
  22.                 //    alert(value)
  23.                 console.log(input.value)
  24.             }
  26.             inputHandle1 = () => {
  28.             }
  29.             //将ref的回调形式写在外面避免更新页面在次调用render时再次触发
  30.             outInput = (c) => {
  31.                 console.log(c.value)
  32.             }
  33.             changeHandle=()=>{
  34.                 this.setState({
  35.                     isFlag:!this.state.isFlag
  36.                 })
  38.             }
  39.             state={
  40.                 isFlag:true
  41.             }
  42.             render() {
  43.                 const {isFlag}=this.state
  44.                 return <div>
  45.                     {/*通过回调的方式使用ref,页面更新会调用一次，因为render函数会再次被调用，可以将内联回调函数写在外面*/}
  46.                     <input type="text" placeholder="请输入文字" ref={(c) => { this.input = c }} />
  47.                     <button onClick={this.inputHandle}>确定</button>
  48.                     <input type="text" placeholder="请输入文字" ref={this.outInput} />
  49.                     <button onClick={this.inputHandle1}>确定1</button>
  50.                     <h1  ref={(c) => { this.txt = c,console.log(c) }} >今天的天气格外的{isFlag?'炎热':'凉爽'}</h1>
  51.                     <button onClick={this.changeHandle}>切换</button>
  52.                 </div>
  53.             }
  54.         }
  55.         ReactDOM.render(<Input />, document.getElementById("app"))
  56.     </script>
  57. </body>
  59. </html>

内联回调函数ref默认调用两次
image.png

3.3 createRef

React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
首先定义一个属性，把React.createRef挂载上去

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <div id="app"></div>
  13.     <script src="../js/react.development.js"></script>
  14.     <script src="../js/react-dom.development.js"></script>
  15.     <script src="../js/babel.min.js"></script>
  16.     <script src="../js/prop-types.js"></script>
  17.     <script type="text/babel">
  18.         class Inputs extends React.Component {
  19.             inputHandle=()=>{
  20.                 let {current}=this.myRef
  21.                 console.log(current.value)
  22.             }
  23.            myRef=React.createRef()
  24.             render() {
  25.                 return( <div>
  26.                     <input type="text" placeholder="请输入文字" ref={this.myRef} />
  27.                     <button onClick={this.inputHandle}>确定</button>
  29.                 </div>)
  30.             }
  31.         }
  32.         ReactDOM.render(<Inputs/>, document.getElementById("app"))
  33.     </script>
  34. </body>