React.js函数组件基本使用
函数组件基本使用
React 的函数组件是 React 组件的一种形式，它们是无状态的（stateless），并且只接收 props 作为输入，然后返回 JSX。从 React 16.8 开始，引入了 Hooks API，这使得函数组件也能具有类似于类组件的 state 和其他功能。
1、基本使用
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
let TestDemo=()=>{
return (
<div>hello world</div>
)
}
let element = (
<TestDemo />
)
root.render(element)
</script>
</body>
2、传递参数(props)
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
let TestDemo = (props) => {
return (
<div>{props.count}</div>
)
}
TestDemo.defaultProps = {
count: 0
}
let element = (
<TestDemo count={5} />
)
root.render(element)
</script>
</body>
- defaultProps
在函数组件中，不能直接在组件函数上定义 defaultProps，但可以使用 ES6 模块的默认参数或者在组件外部定义一个对象来模拟 defaultProps 的功能。
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
let TestDemo=(props)=>{
return (
<div>{props.count}</div>
)
}
TestDemo.defaultProps={
count: 0
}
let element = (
<TestDemo count={5}/>
)
root.render(element)
</script>
</body>
3、定义类型检查(propTypes)
也可以使用 PropTypes 库（来自 prop-types 包）来为函数组件的 props 定义类型检查。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/react@18.3/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.3/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
<style>
.wrapper {
background: pink;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
let TestDemo=(props)=>{
return (
<div>{props.count}</div>
)
}
TestDemo.propTypes={
count: PropTypes.number
}
let element = (
<TestDemo count={5}/>
)
root.render(element)
</script>
</body>
</html>
4、事件处理
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
let TestDemo=(props)=>{
const handleClick=(event)=>{
console.log(event)
}
return (
<div>
<div>{props.count}</div>
<button onClick={handleClick}>点击</button>
</div>
)
}
let element = (
<TestDemo count={0}/>
)
root.render(element)
</script>
</body>
5、组件嵌套在对象中
无论是函数组件还是类组件，都可以实现嵌套函数组件和类组件
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
const TestDemo = {
// 类组件
Child1Demo: class extends React.Component {
render() {
return (
<div>0</div>
)
}
},
// 函数组件
Child2Demo: () => {
return (
<button>点击</button>
)
}
}
let element = (
<React.Fragment>
<TestDemo.Child1Demo />
<TestDemo.Child2Demo />
</React.Fragment>
)
root.render(element)
</script>
</body>
6、<React.Fragment>和<Context.Provider>
解决特定问题的组件
<React.Fragment>
<React.Fragment>用于在返回多个元素的组件中，避免创建一个额外的 DOM 元素包裹它们。相当于Vue中的template
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
let TestDemo=(props)=>{
return (
<React.Fragment>
<div>{props.count}</div>
</React.Fragment>
)
}
let element = (
<TestDemo count={0}/>
)
root.render(element)
</script>
</body>
<Context.Provider>
<Context.Provider>是 React 的 Context API 的一部分，它允许在组件树中不必显式地逐层传递 props，就可以让深层的组件访问到某个值。Context 提供了一种在组件之间共享值的方式，而不必显式地通过每一层的 props 传递。如下是一个简单加法示例，后面会详细解释React函数
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app')
let root = ReactDOM.createRoot(app);
let { useState,useContext, createContext } = React
const defaultValue = { count: 0, setValue: () => { } };
const MyContext = createContext(defaultValue);
const TestDemo = () => {
const [count, setCount] = useState(0);
return (
<MyContext.Provider value={{ count, setCount }}>
<ChildDemo />
</MyContext.Provider>
)
}
const ChildDemo=()=>{
const { count, setCount } = useContext(MyContext);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count +1)}>按钮</button>
</div>
);
}
let element = (
<div>
<TestDemo/>
</div>
)
root.render(element)
</script>
</body>
