react函数式组件及hooks

函数式组件：

注意事项：

（1）函数第一个字母要大写

（2）渲染的时候，得写成标签形式，字母要大写，要有结束符

<script type="text/babel">
      function Demo () {
        return <h2>我是用函数定义的组件</h2>
      }
      ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>

函数式组件也可以操作props

    <script type="text/babel">
        function Demo(props) {

            const { name, age, sex } = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                    <li>性别：{sex}</li>
                </ul>
            )
        }
        Demo.propTypes = {
            // 限制name必传，且为字符串
            name: PropTypes.string.isRequired,
            // 限制sex为字符串
            sex: PropTypes.string,
            // 限制age为数值
            age: PropTypes.number,
            // 限制speak为函数
            speak: PropTypes.func
        }
        // 指定默认标签属性值
        Demo.defaultProps = {
            sex: '男',
            age: 18
        }
        const p = { name: '老刘', age: 18, sex: '男' }
        ReactDOM.render(<Demo {...p} />, document.getElementById('test'))


    </script>

函数式组件React.useState()的用法：

（1）const [count,setCount] = React.useState(0)

（2）更改state的状态值的两种方式：

1.setCount(value)

2.setCount((value)=>{})

 import React from 'react'
 
 export default function Demo1() {
    //  a将会是一个数组，第一个元素是状态，第二个是更新状态的方法
    // 所以这里使用数组赋值const [] = React.useState()
    // 这是数组的解构赋值
     const [count,setCount] = React.useState(0)
     function add () {
        //  这是第一种写法setCount(value)
        //  setCount(count+1)
        // 这是第二种写法setCount((value)=>{})
        setCount((count)=>{
            return count+1
        })
     }
     return (
         <div>
             <h2>当前求和为：{count}</h2>
             <button onClick={add}></button>
         </div>
     )
 }
 

函数式组件Ref的使用：

import React from 'react'
 export default function Demo1() {
     const myRef = React.useRef()
    //  提示输入的问题
     function show () {
       alert(myRef.current.value)
     }
     return (
         <div>
             <input type="text" ref={myRef}/>
             <h2>当前求和为：{count}</h2>
             <button onClick={add}></button>
             <button onClick={show}>点击我提示数据</button>
         </div>
     )
 } 

函数式组件生命周期React.useEffect（）：

（1）不写第二个参数----------空数组：

不写第二个参数空数组，这个函数hooks既相当于didmount，又相当于是updatemount，页面一加载会执行，页面一变化谁也不执行

React.useEffect(()=>{

console.log(‘a’)

})

（2）写第二个参数----------空数组：

写了空数组，相当于是组件一挂载的话，会执行一次，但是页面在刷新变化的时候，不会再触发

React.useEffect(()=>{

console.log(‘a’)

},[])

（3）写第二个参数----------数组：

写了数组，相当于是组件一挂载的话，会执行一次，数组中的元素在发生变化的时候，会触发函数执行

React.useEffect(()=>{

console.log(‘a’)

},[count])

import React from 'react'
 export default function Demo1() {
    //  不写第二个参数空数组，这个函数hooks既相当于didmount，又相当于是updatemount，页面一加载会执行，页面一变化谁也不执行
     React.useEffect(()=>{
         console.log('a')
     },[])
    //  a将会是一个数组，第一个元素是状态，第二个是更新状态的方法
    // 所以这里使用数组赋值const [] = React.useState()
    // 这是数组的解构赋值
     const [count,setCount] = React.useState(0)
     function add () {
        //  这是第一种写法setCount(value)
        //  setCount(count+1)
        // 这是第二种写法setCount((value)=>{})
        setCount((count)=>{
            return count+1
        })
     }
     return (
         <div>
             <h2>当前求和为：{count}</h2>
             <button onClick={add}></button>
         </div>
     )
 } 

（4）返回一个函数起到一个在组件卸载前执行，相当于是componentWillUnmount

React.useEffect(()=>{
         console.log('a')
         return ()=>{
             
         }
     },[])