Main Concepts
根据React官网教程步骤学习整理
zyan_cn
这个人很懒,什么也没有写。
展开
-
12 Thinking in React
Steps to think in React 1. 根据UI划分组件层级 App SearchBar ProductTable CategoryRow ProductRow 2. 用React创建一个静态版本(渲染UI) 建议: 渲染UI和添加交互过程分开 通过props传入所需数据, 不推荐使用state构建静态版本 state代表了随时间变化而变化的数据, 应当仅在实现交互时使用 大型项目自下而上开发, 小型项目自上而下开发(先父后子) 3. 确定UI state的最小完整表示(原创 2020-11-02 14:42:24 · 99 阅读 · 0 评论 -
11 Component Composition
组件组合 React有着十分强大的组合模式, 用以实现组件间代码的重用 组件间关系决定着组件之前的组合关系 包含关系 对于例如侧边栏(Sidebar), 对话框(Dialog)这种通用容器来说,我们无法提前知晓其子组件的具体内容 1. 使用特殊的prop: children prop来把子组件传递到渲染结果中去。 function Sidebar(props) { return ( <div style={{color: props.color}}> {props.chi原创 2020-10-31 14:39:04 · 479 阅读 · 0 评论 -
10 Lifting State up
状态提升 lifting child’s local state up to its parent’s local state 当组件A与组件B共同使用相同数据, 数据存储在A与B的state中时 可以将共用数据放到其最近的父元素C的state中去, 让C通过props传递给A与B 这样, C的state是A与B的唯一数据源, 就保证了数据的一致性 示例程序(温度转换)见: myapp>Calculator ...原创 2020-10-30 15:40:30 · 192 阅读 · 1 评论 -
09 Forms
受控组件 什么是受控组件与非受控组件?Controlled components & Uncontrolled components 非受控组件:HTML原生表单元素, 例如input, textarea, select等 受控组件 React组件内部state成为表单组件的唯一数据源 组件控制着/处理用户操作(即管理事件处理) 被React以这种方式控制取值的表单输入元素称为"受控组件"; 与Vue中data作为表单元素唯一数据源、methods处理用户事件是类似的 选择受控组件与否的建议:原创 2020-10-30 14:29:29 · 184 阅读 · 2 评论 -
08 Lists and Keys
Array.map()函数 const numbers = [1, 2, 3, 4, 5] const doubled = numbers.map(number => number *2) 同样地,通过数组的map函数将数组转换成React元素列表 1. 组件中渲染列表 function NumberList(props) { const numbers = props.numbers const items = numbers.map(number => { <li原创 2020-10-30 14:28:54 · 84 阅读 · 0 评论 -
07 Conditional Rendering
条件渲染:根据条件渲染不同组件/组件不同元素 1. if function Usergreeting(props) { return <h1>Welcome back!</h1> } function Guestgreeting(props) { return <h1>Please sign in.</h1> } function Greeting(props) { const isLoggedIn = props.isLoggedIn if原创 2020-10-30 14:28:22 · 86 阅读 · 0 评论 -
06 Handling Events
1. 事件处理的不同点 React事件的命名采用小驼峰camelCase方式,而非纯小写 使用JSX语法时传入函数作为时间处理函数,而非字符串 <!-- HTML --> <button onclick="activateLasers()"> Activate Lasers </button> <!-- REACT --> <button onClick={activateLasers}> Activate Lasers </bu原创 2020-10-30 14:27:18 · 73 阅读 · 0 评论 -
05 Component State
1. 使用State更新渲染DOM 03 React element 更新渲染一节中提到 通过设置定时器重复调用ReactDOM.redner()渲染是不推荐的做法 本节将通过State编写有状态的组件完成之前效果 class Clock extends React.Component { constructor(props) { super(props) this.state = {date: new Date()} } componentDidMount() {原创 2020-10-30 09:37:52 · 82 阅读 · 0 评论 -
04 Component & Props
1. 组件定义 组件将UI拆分成多个独立可复用的代码片段 概念上类似于JS函数,接收任意入参(props),返回React元素 2. 组件类型 函数组件 function Welcome(props) { return <h1> Hello, {props.name} </h1>; } class组件 class Welcome extends React.Component { render() { return <h1>Hello, {this.原创 2020-10-30 09:37:27 · 269 阅读 · 0 评论 -
03 React Element
1. React元素与DOM元素 React元素是构成React应用的最小砖块 React元素是开销极小的普通对象 React组件是由React元素构成的 React DOM负责更新DOM来与React元素保持一致 2. React元素渲染成DOM元素 <div id="root"></div> 称上述div节点为根DOM节点,因为该节点内所有内容都将由React DOM管理 要将React元素/组件渲染到根DOM节点中,只需要将其传入ReactDOM.render() co原创 2020-10-30 09:36:33 · 81 阅读 · 0 评论 -
02 JSX Intro
什么是JSX? JSX is short for Javascript Extension, similar to JSP in the follwing ways… JSP页面允许你在HTML页面通过<% %>写Java代码 JSX页面允许你在HTML标签内通过{ }写JS代码 为什么要使用JSX? 怎样使用JSX? 在JSX中嵌入变量 const name = 'Josh Perez'; const element = <h1>Hello, {name}</h1>原创 2020-10-30 09:36:05 · 82 阅读 · 0 评论 -
01 Concept
React是什么 React是一个声明式的用于构建用UI的JavaScript库 React特点 声明式:命令式? 组件化 一次学习 随处编写 怎样学习入门 边学边做:实践教程 概念学习:教程文档 创建demo的方式 CDN方式引入unpkg的包 使用集成的工具链 推荐的工具链 学习/创建一个新的SPA时:使用 Create React App 在用Node.js构建SSR网站时:试试Next.js 在构建面向内容的静态网站时:试试Gatsby 打造组件库/将React集成到现有代码仓库:尝试原创 2020-10-30 09:35:23 · 81 阅读 · 0 评论