nan's notes

Steps to think in React1. 根据UI划分组件层级AppSearchBarProductTableCategoryRowProductRow2. 用React创建一个静态版本(渲染UI)建议:渲染UI和添加交互过程分开通过props传入所需数据, 不推荐使用state构建静态版本state代表了随时间变化而变化的数据, 应当仅在实现交互时使用大型项目自下而上开发, 小型项目自上而下开发(先父后子)3. 确定UI state的最小完整表示(

组件组合React有着十分强大的组合模式, 用以实现组件间代码的重用组件间关系决定着组件之前的组合关系包含关系对于例如侧边栏(Sidebar), 对话框(Dialog)这种通用容器来说，我们无法提前知晓其子组件的具体内容1. 使用特殊的prop: children prop来把子组件传递到渲染结果中去。function Sidebar(props) { return ( <div style={{color: props.color}}> {props.chi

状态提升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...

受控组件什么是受控组件与非受控组件？Controlled components & Uncontrolled components非受控组件：HTML原生表单元素, 例如input, textarea, select等受控组件React组件内部state成为表单组件的唯一数据源组件控制着/处理用户操作(即管理事件处理)被React以这种方式控制取值的表单输入元素称为"受控组件";与Vue中data作为表单元素唯一数据源、methods处理用户事件是类似的选择受控组件与否的建议:

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

条件渲染：根据条件渲染不同组件/组件不同元素1. iffunction Usergreeting(props) { return <h1>Welcome back!</h1>}function Guestgreeting(props) { return <h1>Please sign in.</h1>}function Greeting(props) { const isLoggedIn = props.isLoggedIn if

1. 事件处理的不同点React事件的命名采用小驼峰camelCase方式，而非纯小写使用JSX语法时传入函数作为时间处理函数，而非字符串<!-- HTML --><button onclick="activateLasers()"> Activate Lasers</button><!-- REACT --><button onClick={activateLasers}> Activate Lasers</bu

1. 使用State更新渲染DOM03 React element 更新渲染一节中提到通过设置定时器重复调用ReactDOM.redner()渲染是不推荐的做法本节将通过State编写有状态的组件完成之前效果class Clock extends React.Component { constructor(props) { super(props) this.state = {date: new Date()} } componentDidMount() {

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.

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

什么是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>

React是什么React是一个声明式的用于构建用UI的JavaScript库React特点声明式：命令式？组件化一次学习 随处编写怎样学习入门边学边做：实践教程概念学习：教程文档创建demo的方式CDN方式引入unpkg的包使用集成的工具链推荐的工具链学习/创建一个新的SPA时：使用 Create React App在用Node.js构建SSR网站时：试试Next.js在构建面向内容的静态网站时：试试Gatsby打造组件库/将React集成到现有代码仓库：尝试