JavaScript教程https://wangdoc.com/javascript/ES6教程https://wangdoc.com/es6/React教程https://react.dev/learn/javascript-in-jsx-with-curly-bracesReact组件是返回一段HTML结构的函数transition: transform 0.3s ease-in-out;transition: 属性名 持续时间 时间函数 延迟时间transition 控制 CSS 属性变化时的过渡动画效果可形成平滑动画transform对元素进行视觉变换比如缩放、平移、旋转、倾斜等Components can render other components, butyou must never nest their definitions://函数等价写法 // 1. 函数声明 function handleProductClick(title) { alert(Product Clicked! title); } // 2. 函数表达式 const handleProductClick function (title) { alert(Product Clicked! title); }; // 3. 箭头函数 const handleProductClick (title) { alert(Product Clicked! title); };const保证的是handleProductClick这个变量永远指向这个函数不能把它重新赋值成别的函数。并保证了先定义后使用。const [isDark, setIsDark] useState(false);useState(false)里的false只是一个初始值只在第一次渲染时生效。之后每次渲染React 都会忽略这个参数返回它内部记住的当前值。重新渲染 React 再次从头到尾调用一遍这个函数。react 组件之间的数据流是单向的父组件--子组件子组件通过 props 接收父组件的数据并且子组件中 props 是只读的。//父组件 function App() { return ( div h1Hello, React!/h1 Product image{product.image} title{product.title} detail{product.detail} / /div ); } //子组件 function Product(props) { return ( StyledProductContainer img src{props.image} / div div{props.title}/div div{props.detail}/div /div /StyledProductContainer ); }行为的处理从子到父子组件传递给父组件的方法叫回调函数//箭头函数 (p) ( Product {...p} / ) //( ) 里面是一个表达式箭头函数会隐式返回它 //等价于 (p) { return Product {...p} /; } //也可写成 (p) Product {...p} ///jsx中外层 { }表示这里要插入一个 JavaScript 表达式。 // 内层 { }表示一个 JavaScript 对象字面量。 div style{{ display: flex, justifyContent: center }}组件不能返回多个JSX标签必须用一个共同的父标签封装起来如div/divMyButton count{count} onClick{onClick} /React 调用函数组件时只会传一个参数props 对象。MyButton({ count: count, onClick: onClick });对象解构写法function MyButton({ count, onClick }) { ... }等价于function MyButton(props) { const { count, onClick } props; ... }function Square({ value }) { return button classNamesquare1/button; }function Square({ value })indicates the Square component can be passed a prop calledvalue.const arr [a, b, c]; arr.map((item, index) { console.log(item, index); }); // 输出 // a 0 // b 1 // c 2
