[React] Extracting Private React Components
React Components Private
2023-09-14 09:00:54 时间
we leverage private components to break our render function into more manageable pieces without leaking the implementation details of our component.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script src="//fb.me/react-0.14.3.js"></script> <script src="//fb.me/react-dom-0.14.3.js"></script> </head> <body> <div id="app"></div> </body> </html>
const users = [ { name: 'Merrick', id: 1 }, { name: 'John', id: 2 }, { name: 'Trevor', id: 3 } ] const UserListItem = ({user}) => { return ( <div> {user.name} </div> ); }; class UserList extends React.Component { render(){ return ( <div> <h1>Users</h1> { this.props.users.map( (user) => { return <UserListItem user={user} key={user.id} /> }) } </div> ); } } ReactDOM.render(<UserList users={users} />, document.getElementById('app'));
相关文章
- react组件深度解读
- React-利用React-Profiler提升应用性能
- 进来聊聊!Vue 和 React 大杂烩!
- React In Depth - React 源码解析 - render() & Fiber
- 前端一面经典react面试题(边面边更)
- React Hooks教程之基础篇
- React源码分析5-commit
- react源码分析:babel如何解析jsx
- React魔法堂:size-sensor源码略读
- 前端面试指南之React篇(二)
- 一文带你梳理React面试题(2023年版本)
- react源码分析:深度理解React.Context_2023-02-28
- 深入react源码中,理解setState究竟做了什么?
- react源码分析之协调与调度
- react源码分析:深度理解React.Context
- react踩坑笔记
- react源码中的协调与调度_2023-02-21
- react源码解析16.concurrent模式_2023-03-15
- react 基础之组件篇二——Style in React