张梓萌的学习日志

biosheeep

React

JSX：js的语法扩展

1.大括号

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

大括号内可以放置任何有效的Javascript表达式

e.g.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

建议尽量将内容包裹在括号内，避免分号陷阱。

2.JSX本身也是一个表达式

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

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

3.JSX特定属性

(1). 使用引号，将属性值指定为字符串字面量。

const element=<div tabIndex="0"></div>;
const element=<img src={user.avatarUrl}></img>;//在属性中嵌入js表达式时，大括号（对于表达式）和引号（对于字符串值）仅能使用一个。

React DOM 使用 camelCase定义属性的名称
- 例如，
  JSX:class -> className,tabindex -> tabIndex。
(2).指定子元素

const element = <img src={user.avatarUrl} />;//当一个标签里面没有内容，可以使用/>来闭合标签。
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);//JSX标签里面能够包含很多子元素。

(3).防止注入攻击(XSS)

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

(4).JSX表示对象

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

e.g.以下两种代码等效

const element=(
  <h1 classname="greeting">
  hello,world!</h1>
);

const element=React.createElement(
  'h1',//type
  {
    className='greeting'
  },
  'hello,world!'//children
);

4.元素渲染

React DOM 会负责更新 DOM 来与 React 元素保持一致.
简例

<div id="root"></div>

const element=<h1>hello!</h1>
ReactDOM.render(element,document.getElementById('root'));//将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()

5.更新已经渲染的元素：创建一个全新的元素，传入ReactDOM.render()

简例

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);//回调函数，每秒都调用ReactDOM.render()

React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态,即只更新它需要更新的部分

6.组件&props

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

函数组件和class组件

最简单的定义组件的方式

以下为两个等效的组件：

function Welcome(props){
  return <h1>Hello,{props.name}</h1>;//本质就是js函数
}

class Welcome ectends React.Component{
  render(){
    return <h1>Hello!</h1>;
  }
}

渲染组件

简例

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);//调用 ReactDOM.render() 函数，并传入 <Welcome name="Sara" /> 作为参数
//React 调用 Welcome 组件，并将 {name: 'Sara'} 作为 props 传入。
//Welcome 组件将 <h1>Hello, Sara</h1> 元素作为返回值。
//React DOM 将 DOM 高效地更新为 <h1>Hello, Sara</h1>

注意：组件名称必须以大写字母开头。
小写字母开头的组件会被React视作原生DOM标签。
- div代表 HTML 的 div 标签，
  而 Welcome则代表一个组件，并且需在作用域内使用 Welcome。
组合组件

简例：多次渲染Welcome组件的App组件

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

提取组件(拆分)

function Comment(props){
  return(
    <div className="Comment">
    <UserInfo user={props.author}/>
    <div className="Comment-text">
        {props.text}
    </div>
    <div className="Comment-date">
        {formatDate(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.user}/>
      <div className="UserInfo-name">
      {props.user.name}
      </div>
      </div>
    )
  }
  const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
  ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

所有 React 组件的 props 都不能被更改

State&生命周期

将函数组件转换成class组件

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

向class组件中添加局部的state

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>//把this.props.date替换成this.stats.date
    );
  }
}

添加一个 class 构造函数，然后在该函数中为 this.state 赋初值：

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

PengZC

@biosheeep 替代文字

biosheeep

1.19无

PengZC

@biosheeep 适当劳逸结合也不错啦，可惜手坏了不能和宝一起征战峡谷，可惜
记得进行种子杯重构，争取这周完成

biosheeep

1.20
疯狂赶信导论文hhh，通宵肝完了
然后昏睡了检讨

biosheeep

@biosheeep 晚上继续搞下午睡去了

PengZC

@biosheeep 给宝加油，太累了就歇会，还是以种子杯重构为主，不然你们使劲学不进行项目输出，这样比较担心掌握情况

holdice

@biosheeep qs（速速与我联调

biosheeep

1.21
函数组件基本写完
还没抽离好准备再学react的state（没学会自闭

PengZC

@biosheeep 贴贴，实在不懂的可以要郭老师给你们线上教学

biosheeep

1.22
白天有事晚上在看接口文档具体操作
怡宝给俺了一个react项目示例正在熟悉代码

PengZC

@biosheeep 得

biosheeep

1.25
学了接口的一些知识做了个模拟接口练手
和怡宝进行种子杯的代码合并

PengZC

@biosheeep 好

biosheeep

1.27
按照代码修改提议里把代码优化了还差表单函数组件正在捯饬
学习数据结构正在看线性表

PengZC

@biosheeep 种子杯做得如何了？有推进的话记得写写

biosheeep

种子杯按照郭老师的建议在优化，在试试队伍功能组件，表单封装还有问题，打算今天弄了再问问郭老师

PengZC

@biosheeep

biosheeep

1.30
看antd，用antd写注册表单

NGU

太棒了，向你学习