React 函数组件

Posted 2021-04-25 前端算法学习

React 函数组件

class组件的劣势

class组件虽然功能强大 但是却存在两个主要的问题

1. this指向问题
2. 书写太过复杂

一个最简单的函数组件

如何创建一个函数组件

function App(props) {
  return (
    <div>我是一个名为App的组件</div>
  )
}

如何使用函数组件

组件可以被当作标签使用

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

函数组件的外部数据

在组件内定义外部数据

const A = (props)=>{
  return (
    <div>{props.name}</div>
  )
}

使用外部数据

class B extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      n:0
    }
  }
  render(){
    return (
      <A name={this.state.n}/>
    )
  }
}

函数组件使用内部数据

函数组件在使用内部数据的时候 是通过React.useState来使用的

useState中唯一的参数就是这个初始外部数据的值

useState的返回值也当前内部数据以及修改这个内部数据的函数

因此useState的使用方法如下

const [count,setCount] = useState(0)

如果需要定义多个内部数据 就使用多次useState定义变量即可

const [count,setCount] = useState(0)
const [mess,setMess] = useState('My name is')

一个+1的例子

function App() {
  const [n, setN] = useState(0)
  return (
    <div>
      {n}
      <button onClick={() => setN(n + 1)}>+1</button>
    </div>
  )
}

内部数据的读取

在读取外部数据时 我们不需要像class组件一样通过this.state获取 直接通过变量名就可以使用

<div>{n}</div>

内部数据的改写

写数据也不需要通过state 而是可以直接用useState返回的第二个参数就可以实现写数据

<button onClick={() => setN(n + 1)}>+1</button>

函数组件的生命周期

在class组件中 生命周期可以通过调用函数来完成

例如

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

而在React函数组件当中 所有的生命周期都是通过useEffect来模拟的

useEffect接受两个参数

• 第一个参数是一个函数 它是在钩子生效的时候来调用的函数

• 第二个参数是一个数组 它用来指明监听的变量

模拟componentDidMount

useEffect(() => {
    console.log('页面产生了')
  }, []
)

一个例子

function App() {
  const [n, setN] = useState(0)
  const [m, setM] = useState(10)
  // 只针对单一数据 模拟componentDidMount
  useEffect(() => {
    console.log('页面产生了')
  }, [])
  return (
    <div>
      {n}
      <button onClick={() => setN(n + 1)}>n+1</button>
      <br></br>
      {m}
      <button onClick={() => setM(m + 1)}>m+1</button>
    </div>
  )
}

模拟componentDidUpdate

• 监听所有数据变化

useEffect(() => {
    console.log('任意变化了')
  }
)

• 监听个别数据

useEffect(() => {
    console.log('m变化了')
  }, [m]
)

例子 +1 监听数据

function App() {
  const [n, setN] = useState(0)
  const [m, setM] = useState(10)
  // 只针对单一数据 模拟componentDidUpdate
  useEffect(() => {
    console.log('m变化了')
  }, [m])
  return (
    <div>
      {n}
      <button onClick={() => setN(n + 1)}>n+1</button>
      <br></br>
      {m}
      <button onClick={() => setM(m + 1)}>m+1</button>
    </div>
  )
}

模拟componentWillUnmonnt

useEffect(() => {
  return () => (
    console.log('child被销毁了')
  )
})

一个例子

function App() {
  const [visible, setVisible] = useState(false)
  return (
    <>
      {visible ? <button onClick={() => { setVisible(false) }}>hide</button> : <button onClick={() => { setVisible(true) }}>show</button>}
      {visible ? <Child /> : null}
    </>
  )
}

const Child = (props) => {
  useEffect(() => {
    return () => (
      console.log('child被销毁了')
    )
  })
  return (
    <>Child</>
  )
}