从零开始学React-coderwhy React课程笔记（二）

第一天下午: React案例-电影列表-计数器-JSX语法等

列表渲染案例

jsx 复制代码

constructor() {
  super();
  this.state = {
      message: "Hello World",
      movies: ["秒速5厘米","言叶之庭","你的名字",],
  };
}

render() {
  // 返回需要渲染的 JSX 内容，最好用()包一下
  return(
    <div>
        <ul>
            {
                this.state.movies.map(item => <li key={item}>{item}</li>)
            }
        </ul>
    </div>
    );
}

注意 JSX 的大括号里面不能写 for 循环，因为 JSX 的 {} 内只能使用表达式。所以这里用 map 来迭代。

另外一种方法是将 for 循环放在HTML 代码外，然后将拼接后的内容再放到 {} 里面

计数器案例

jsx 复制代码

class App extends React.Component {
        // 构造函数
  constructor() {
    super();
    this.state = {
      count: 0,
    };
  }

  increment() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  decrement() {
    this.setState({
      count: this.state.count - 1,
    });
  }

  render() {
    // 解构赋值
    const {count} = this.state
    return (
      <div>
        <button onClick={this.increment.bind(this)}>+1</button>
        <button onClick={this.decrement.bind(this)}>-1</button>
        <div>{count}</div>
      </div>
    );
  }
}

coderwhy老师：代码还是得自己敲一下，这样才能知道细节，自己敲过才能掌握

JSX 简介

JSX 是什么

JSX 是一种 JavaScript 的语法扩展（extension） ，让我们可以将 HTML 写在 JS 里面（HTML in JS）
可以直接在 JS 代码里描述 UI 界面

为什么 React 选择了 JSX

React 认为渲染逻辑本质上与其他 UI 逻辑存在内在耦合。比如UI需要绑定事件(button、a原生等等)；比如UI中需要展示数据状态;

JSX 的书写规范

只能有一个根元素，需要在外面包括一个 div 或者 <></>
JSX 的外层需要包裹一个小括号
可以是单标签，也可以是双标签

JSX 的基本用法

JSX 注释

jsx 复制代码

{ /* JSX的注释写法 */ }

JSX 嵌入数据

Number/String/Array：直接显示出来

undefined/null/Boolean，内容为空

Object 类型不能作为子元素进行显示

中间老师课堂放歌看讨论区，又给了一些学习方面的建议

学习要有规划，做下计划。不然今天学这个明天又学那个，很容易抓不住重点，最后什么都学不到

学习要从基础开始，没把基础打好就要搭建万丈高楼不现实。学习 React 前一定要把 JS 基础打好不然没法学

JSX 嵌入表达式

可以插入运算表达式

可以插入三元运算符

可以调用方法获取结果

JavaScript 表达式都有哪些？可以看看 MDN 上的解释：表达式语句

JSX 绑定属性

title, src, href 这些基本属性统一使用 {}。

绑定 class，因为 class 是关键字所以 JSX 推荐使用 className：

jsx 复制代码

<h2 className="a"> </h2>

需求：如何进行动态绑定：isActive: true -> active，即 isActive 为 true 时在 className 里加上 active
方法一：字符串拼接。这里还使用到了模板字符串的语法（也是 JS 的一个语法
jsx 复制代码
<h2 className={`abc xyz ${isActive ? 'active' : ''}`}></h2>
方法二：将所有的 class 放到数组里面
jsx 复制代码
if (isActive) classList.push('active')
方法三：使用第三方库 classnames 进行拼接

绑定 style，为什么用两层大括号？最外层的是 JSX 的 {}，内层的 {} 代表是一个对象

jsx 复制代码

<div style={{fontSize: 16,}}> </div>