get started

通过script标签引入创建react项目是最简单的方式，但是当你业务功能逐渐增长，充分利用工具链，我们会采用create a react app的方式

1、JSX

JSX是一种模板语法，结合了html和js两者的功能

1.嵌入式表达

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

我们可以将定义好的变量放在JSX中，模板会自动查找变量。

同理，在{}中，我们不仅可以处理变量，我们还可以处理表达式。实际上在{}中的部分，处理方式无限接近于js

return <h1>Hello, {formatName(user)}!</h1>;

2.设置标签属性

刚刚我们看到{}都是作用在内容区，我们同样可以将这种语法应用于元素的标签种，实现通过变量或者函数，对属性进行操作

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

注意

对于标签的固有属性我们会采取驼峰命名的方式

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

3.空标签简写

对于空标签，我们可以直接通过在尾部添加/的方式简写

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

总结

JSX允许我们将html和js的用法结合起来，实现了将html骨架动态更改内容

2、组件化

元素

首先我们要明白react的元素render规则。在render一个元素后，这个元素都是不可以修改的。

在react中，每一个元素都像是一个对象

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

我们每次都需要找到root根节点，因为它被react.dom管理。

但是元素创建render后是不可以修改的，一旦我们render了这个元素，它的子节点和属性都不能再被修改。

讲到现在为止，唯一更新已经render好的元素就是重建一个新的元素，然后render一遍。

其中react.dom的工作原理就是每当元素更新，与之前元组不同时，react.dom才会更新一次

组件

组件就是由元素组成的，只不过它不再类似对象，而是更像一个函数。所以有两种创建方式，一种是函数型创建，一种是class类创建

class式创建

将函数式组件转化为class组件需要5步：

首先运用es6语法，将新创建的组件继承react.component

添加一个render方法

将函数的主体内容放入到render函数中

将原来的props替换为this.props

将函数式命名删除

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

类组件的传值

为了更好的复用组件，我们必须对代码抽取出来并对其抽象封装，这难免需要一个props变量来存放传入的数据，随着props的引入，我们要对react中一个重要原则有所了解

纯函数

无论你要创建的是函数还是class类，都要求函数是纯函数

什么是纯函数？纯函数就是输入参数不变，并且每次同样的输入都会有同样的输出

function sum(a, b) {
  return a + b;
}

反例如下

function withdraw(account, amount) {
  account.total -= amount;
}

由于函数中更改了输入变量，所以这不是一个纯函数

所以react要求我们所有的组件都必须遵守是纯函数的约定，就是意味着不能直接更改所传入的数据

当然修改组件还有其他方式，如下

为了将传入参数props转化到state当中，我们要有接下来三步骤首先，this.props.data要用this.state.data·在函数中替换

其次，在class中添加constructor构造函数，在构造函数中我们初始化state

最后，将Clock标签中传递的参数取消

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>
    );
  }
}

当组件传递给react.dom时候，

state的正确使用方法

1、不要直接修改state的值

规范写法
this.setState({comment: 'Hello'});

2、异步更新数据

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

3、数据融合一旦this.setState函数执行成功，意味着state被新的state完全替换

组件间的传值

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

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

React官方文档有感