react笔记02

css

1. 用 className 属性来引用外部 CSS 样式表中定义的 class
2. 利用 style 属性，不推荐使用，但是这个属性接受一个js 对象，它和 CSS 还是有一些区别的：

• 属性名要采用驼峰命名
• 会自动添加 px 后缀，使用 px 以外的单位要设为字符串

function Greeting() {
  return <div style={{height: 100,backgroundColor:'blue'}}>Hello World!</div>;
}

React 实现了一套独立于浏览器的 DOM 系统，兼顾了性能和跨浏览器的兼容性。我们借此机会完善了浏览器 DOM 实现的一些特殊情况。在 React 中，所有的 DOM 特性和属性（包括事件处理）都应该是小驼峰命名的方式。

jsx 中设置属性

1. 使用字符串来表示属性值

const a = <a href="https://www.reactjs.org"> link </a>;

2. 使用 {} 的语法来插入一个 js 表达式

const img = () => {
   const title = 'Hello World!'
   return <div style={{height: 100,backgroundColor:'blue'}}>{title}</div>;
}

使用 style 插入一个 js 对象时，需要使用双大括号的写法，外层的大括号表示 jsx 插入一个 js 表达式，内层的大括号表示这个 js 表达式说一个对象。

props

组件可以接收一个参数，通常我们将其命名为 props。传递和接收 props 的方式如下：

function Greeting() {
  return (
    <div>
      <h1>Hello World!</h1>
      <Person name='Phoney'/>
    </div>
  )
} 

const Person = (props) => (<h2>{props.name}</h2>)
// 使用解构直接将 props 参数打散
const Person = ({name}) => (<h2>{name}</h2>)

我们还可以在组件标签直接加入子元素，这时候在组件内就需要使用 props.children 来访问。

当我们传递整个对象到组件的时候，比如我们传递一个 book 对象，其中包含 title,author,des 等信息，那我们接收 title 的时候就需要使用 props.book.title。也有简便一点的方法，就是传递 book 的时候，使用展开运算符的语法，这样就可以在组件中直接使用 props.title 接收。

function Greeting() {
 const book =  {title: 'react', author: 'phoeny', des: 'good'}
  return (
    <div>
      <h1>Hello World!</h1>
      <Book {...book} />
    </div>
  )
} 

const Book = (props) => (<h2>{props.title}</h2>)

list

使用 map 方法迭代数组，并返回每一项元素的组件。每一项需要包含独特的 key。

event

function Book({title, des}) {
  const clickEvent =  (e) => console.log('Phoeny')
  const clickDes =  (des) => console.log(des)
   return (
     <div>
       <div onClick={() => console.log(title)}>{title}</div>
       <div onClick={clickEvent}>Phoeny</div>
       <div onClick={clickDes(des)}>{des}</div>
     </div>
   )
 } 

这段代码在未点击时就会打印所有的 des 信息，因为在整个 onClick 的时候直接执行了方法，而不是等到点击之后再执行。那么对于这种需要传参的事件要怎么写呢？

<div onClick={() => clickDes(des)}>{des}</div>

用方法再包裹一层即可。