短信预约-IT技能 免费直播动态提醒

2024-12-03 02:07

关注

class Welcome extends React.Component { 
  constructor(props) { 
    super(props) 
  } 
  render() { 
    return  
  } 
} 

function Welcome(props) { 
  return ; 
} 

function Welcome(props) { 
  return ; 
} 

cass Welcome extends React.Component { 
  constructor(props) { 
    super(props) 
  } 
  render() { 
    return  
  } 
} 

const FunctionalComponent = () => { 
    const [count, setCount] = React.useState(0); 
 
    return ( 
        
 
            
count: {count}
 
             setCount(count + 1)}>Click 
        

在使用hooks情况下，一般如果函数组件调用state，则需要创建一个类组件或者state提升到你的父组件中，然后通过props对象传递到子组件

生命周期

在函数组件中，并不存在生命周期，这是因为这些生命周期钩子都来自于继承的React.Component

所以，如果用到生命周期，就只能使用类组件

但是函数组件使用useEffect也能够完成替代生命周期的作用，这里给出一个简单的例子：

const FunctionalComponent = () => { 
    useEffect(() => { 
        console.log("Hello"); 
    }, []); 
    return ; 
}; 

上述简单的例子对应类组件中的componentDidMount生命周期

如果在useEffect回调函数中return一个函数，则return函数会在组件卸载的时候执行，正如componentWillUnmount

const FunctionalComponent = () => { 
 React.useEffect(() => { 
   return () => { 
     console.log("Bye"); 
   }; 
 }, []); 
 return ; 
}; 

调用方式

如果是一个函数组件，调用则是执行函数即可：

// 你的代码  
function SayHi() {  
    return 
Hello, React
  
}  
// React内部  
const result = SayHi(props) // » 
Hello, React
 

如果是一个类组件，则需要将组件进行实例化，然后调用实例对象的render方法：

// 你的代码  
class SayHi extends React.Component {  
    render() {  
        return 
Hello, React
  
    }  
}  
// React内部  
const instance = new SayHi(props) // » SayHi {}  
const result = instance.render() // » 
Hello, React
 

获取渲染的值

首先给出一个示例

函数组件对应如下：

function ProfilePage(props) { 
  const showMessage = () => { 
    alert('Followed ' + props.user); 
  } 
 
  const handleClick = () => { 
    setTimeout(showMessage, 3000); 
  } 
 
  return ( 
    Follow 
  ) 
} 

类组件对应如下：

class ProfilePage extends React.Component { 
  showMessage() { 
    alert('Followed ' + this.props.user); 
  } 
 
  handleClick() { 
    setTimeout(this.showMessage.bind(this), 3000); 
  } 
 
  render() { 
    return Follow 
  } 
} 

两者看起来实现功能是一致的，但是在类组件中，输出this.props.user，Props在 React中是不可变的所以它永远不会改变，但是 this 总是可变的，以便您可以在 render 和生命周期函数中读取新版本

因此，如果我们的组件在请求运行时更新。this.props 将会改变。showMessage方法从“最新”的 props 中读取 user

而函数组件，本身就不存在this，props并不发生改变，因此同样是点击，alert的内容仍旧是之前的内容

小结

两种组件都有各自的优缺点

函数组件语法更短、更简单，这使得它更容易开发、理解和测试

而类组件也会因大量使用 this而让人感到困惑