React with react.js

开始

首先确保自己已经安装好 node 环境或者 yarn 环境，并且最好已经为 npm 或 yarn 换好了源。

下面以 npm 为例。进入想要创建项目的目录，打开终端。输入：

npx create-react-app <name>

或：

npm install create-react-app -y #把脚手架安装在本地
create-my-app <name>

然后：

cd <name>
npm start

JSX

react 中我们用标签来描述 js 的对象。它有些像 JavaScript，又有些像 XML，这种风格我们称为 JSX。

就像这样：

const element = <div>Hello, world!</div>;

然后我们用 ReactDOM 的 render 方法把 element 渲染到 DOM 树的 id 为 example 的节点上：

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

注意，JSX 中的多个子标签必须被一个闭合的父标签包裹，就像这样：

const element =
<div>
  <h1>TITLE</h1>
  <div>hello~</div>
</div>;

如果我们要往 JSX 中添加 JavaScript 代码，那么把代码用一对大括号包裹：

var x = 'xixi';
const element = <div>
  <h1>TITLE</h1>
  <div>hello~</div>
  <div>{x}</div>
</div>;

当然，我们还能这么用：

const element = <button onClick={ () => alert('Hi~') }></button> // onClick 绑定了一个 ES6箭头函数

(本人暂时只会写 class-style 的 React，未来会补上 function + hooks)

React objects, props, state

React 的对象继承 React.Component 的接口，一般需要一个 render 方法来渲染对象本身。render 会在对象的 constructor 调用之后，以及对象每次调用 setState 方法之后被调用。

我们用类似 html 标签的方式把对象插入 DOM 树中，比如下面的代码，我们把<Hello Button /> 插入 DOM，在其闭合标签中用 name 来为其定义 props，并且在对象被点击的时候在 handleClick 里获取 this.props.name 来得到其 name 属性，显示在 alert 的对话框中。

在下面的代码中你可以看到：React 风格的 stylesheet，state、props的基础用法，以及 ES6的语法糖 var { a } = b，和 var a = b.a 等价。

class HelloButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      clicked: 0
    };
    this.myStyle = {
      'height'     :     '40px',
      'width'      :     '75px',
      'positon'    : 'relative',
      'font-weight':     'bold',
      'margin'     :     'auto'
    };
  }

  handleClick() {
    alert('Hello! ' + this.props.name);
    var { clicked } = this.state;
    ++clicked;
    this.setState({
      clicked: clicked
    });
  }

  render() {
    return (
      <div>
        <button onClick={ this.handleClick.bind(this)} style={this.myStyle}>
            Click me
        </button>
        <div>
            I've been clicked { this.state.clicked } times.
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <HelloButton name='Jirachi' />
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

我们需要非常万分注意的一点是，setState 是异步（asynchronous）的，我们在调用 setState 后，对象的 state 并不会立刻刷新，如果我们要获取实时的信息，在 setState 的第二个参数中填入回调函数（callback function）即可。

像这样：

this.setState({
  clicked: clicked
}, () = > alert(this.state.clicked));

用数组来创建列表

var array = [1, 1, 4, 5, 1, 4];
array.map(items => <li>{items}</li>);

之后 array 就会被转换成一个 JSX 对象了。如果我们要利用上索引，那么可以这样改动：

var array = [1, 1, 4, 5, 1, 4];
array.map((items, index) => {
  return (
    <li id={`${index}`}>{items}</li>
  );
});

用上面的知识做的一个 To-do list 小 demo：

代码：

https://github.com/Endsieg77/to-do-list

React 生命周期

React Hooks

基础 function hooks

// react.js 的 function hooks 定义方法如下：
function componentName() {
    const [state, setterOfState] = useState(initialVal);
    // 其中 state 是变量名，setterOfState 是一个函数。
    // 用来修改 state 的值，initialValue 设置 state 的初值。
    useEffect(
        callback
    , [triggers]);
    // callback 为回调函数，触发条件是 triggers 发生改变，
    // callback 可以有返回值，如果返回值是一个函数，那么函数将会在组件更新之前被调用。
    // 这个函数我们一般称为清理函数（Cleanup Function）
    // triggers 可以不用填，默认为所有 state 变量。
}

Function Hooks 组件的生命周期：

组件挂载 –> 执行副作用 –> 组件更新 –> 执行清理函数 –> 执行副作用 –> 组件更新 –> 执行清理函数 –> 组件卸载

function hooks 的复用性

我们之所以逐步转向 function hooks，甚至未来的 React 可能考虑 deprecate class-style，有一个重要原因就是 function hooks 具有较强的可复用性。

考虑以下代码：

function useCount(number) {
  const [color, setColor] = useState(0);
  useEffect(() => {
    setColor(number % 2);
  });
  return color;
}

function App() {
  const [number, setNumber] = useState(0);
  const [test, setTest] = useState('a');
  const color = useCount(number);
  const myStyle = {
    'background-color': color ? 'red' : 'blue',
    'color': 'aliceblue',
    'cursor': 'pointer'
  };
  useEffect(() => {
    document.title = `clicked ${number + test} times`
  });
  return (
    <div>
      <p>{`${number} ${test}`}</p>
      <button style={myStyle} onClick={() => setNumber(number + 1)}>Click</button>
      <button onClick={() => setTest(test + 'a')}>Change test</button>
    </div>
  );
}

function hooks 的嵌套允许我们复用具有相似行为的组件，而在编写 class-style 的时候，即使是经验老道的 React User 也难以避免大量重复的逻辑（这一点我在写上面那个 To-Do List 的时候深有体会）。

进阶（准备 AtSAST 结束之后写一写）