react学习日志2

一、JSX

1、什么是JSX

const element = <h1>Hello, world!</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

2、为什么使用JSX

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

即React 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了，所以使用JSX

3、在 JSX 中嵌入表达式

const name = 'Roman';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。例如，2 + 2，user.firstName 或 formatName(user) 都是有效的 JavaScript 表达式。

4、JSX 也是一个表达式

可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX

function getGreeting(user) {
  if (user) {
    return <h1>hello,{user}!</h1>
  }
  return <h1>hello world</h1>
}


ReactDOM.render(
  getGreeting('user'),
  document.getElementById('root')
);

5、JSX特定属性

1）通过使用引号，来将属性值指定为字符串字面量

const element = <div tabIndex="0"></div>;

2）可以使用大括号，来在属性值中插入一个 JavaScript 表达式

const element = <img src={user.avatarUrl}></img>;

6、JSX 防止注入攻击

你可以安全地在 JSX 当中插入用户输入内容：

const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

7、JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

// 以下两种示例代码完全等效
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// ===
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);


// 实际上React.createElement创建了一个这样的对象
// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }

二、元素渲染

1、什么是元素

元素是构成 React 应用的最小砖块。元素描述了你在屏幕上想看到的内容。

const element = <h1>Hello, world</h1>;

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

2、将一个元素渲染为DOM

在html文件里面有一个<div id="root"></div> 我们称为根DOM节点 因为该节点内的所有内容都将由 React DOM 管理

将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

3、更新已渲染得元素

React元素是不可变对象，一旦被创建，你无法更改它的子元素和属性。更新UI唯一的方式是创建一个全新的元素并传入ReactDOM.render()

// 计时器
function tick() {
  const element = (
    <div>it is { new Date().toLocaleTimeString()}</div>
  )
  ReactDOM.render(element, document.getElementById('root'))
}

setInterval(tick, 1000

在实践中，大多数 React 应用只会调用一次 ReactDOM.render()

React只更新它需要更新的部分，ReactDOM比较元素前后状态，并只进行必要更新

 

三、组件与Props

1、什么是组件

组件允许你将UI拆分为独立可复用的代码片段，并对每个片段进行独立构思。从概念上类似js函数，接受任意入参（即props），并返回用于描述页面展示内容的react元素。

2、函数组件与class组件

函数组件本质上就是js函数，接收props对象返回React元素

function Greeting(user) {
  if (user) {
   return <h1>hello,{user}!</h1>
  }
  return <h1>hello world</h1>
}


ReactDOM.render(
   Greeting('user'),
   document.getElementById('root')
);

同时可以使用ES6的class定义组件

class Greeting extends React.Component {
  render() {
    if (this.props.user) {
      return <h1>hello,{this.props.user}!</h1>
    }
    return <h1>hello world</h1>
  }
}


ReactDOM.render(
  <Greeting user='user' />,
  document.getElementById('root')
);

3、渲染组件

react元素可以是DOM标签也可以是自定义组件

当react元素是自定义组件时，会将JSX接收的属性(attributes)及子组件(children)转为单个对象传递给组件，这个对象称为props

class Greeting extends React.Component {
  render() {
    if (this.props.user) {
      return <h1>hello,{this.props.user}!</h1>
    }
    return <h1>hello world</h1>
  }
}


const element = <Greeting user='user' />


ReactDOM.render(
  element,
  document.getElementById('root')

4、组合组件

组件可以在其输出中引用其他组件。可以让我们用同一组件抽象出任意层次的细节。

例如：创建一个多次渲染Greeting组件的App组件

class Greeting extends React.Component {
  render() {
    if (this.props.user) {
      return <h1>hello,{this.props.user}!</h1>
    }
    return <h1>hello world</h1>
  }
}


class App extends React.Component {
  render() {
    return (
      <div>
        <Greeting user='user' />
        <Greeting user='user' />
        <Greeting user='user' />
      </div>
    )
  }
}


const element = <App />
ReactDOM.render(
  element,
  document.getElementById('root')
)

5、提取组件

将组件拆分为更小的组件。

// function Comment(props) {
//   return (
//     <div className="Comment">
//       <div className="UserInfo">
//         <img className="Avatar"
//           src={props.author.avatarUrl}
//           alt={props.author.name}
//         />
//         <div className="UserInfo-name">
//           {props.author.name}
//         </div>
//       </div>
//       <div className="Comment-text">
//         {props.text}
//       </div>
//       <div className="Comment-date">
//         {props.date}
//       </div>
//     </div>
//   )
// }
// 修改成
function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo author={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {props.date}
      </div>
    </div>
  )
}


function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  )
}


function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.author} />
      <div className="UserInfo-name">
        {props.author.name}
      </div>
    </div>
  )

6、props的只读性

组件无论是使用函数声明还是class声明都不能修改自身的props。

所有 React 组件都必须像纯函数（不更改入参的函数称为纯函数）一样保护它们的 props 不被更改。

 

其他

1、使用 camelCase（小驼峰命名）来定义属性的名称

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

 

2、组件名称必须大写字母开头

React 会将以小写字母开头的组件视为原生 DOM 标签。