React手记

React手记

１、

---

２、React元素渲染

React元素渲染是通过方法ReactDOM.render(element, rootNode)来完成的，通过render方法的参数，引出了如下两个概念：

元素：是构成React应用的最小单位，它用于描述屏幕上输出的内容
根节点：React应用一般只定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。

<div id="example"></div>

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

2.1. 更新元素的渲染
因为React元素都是不可变更的，即当元素被创建之后，就不能改变其内容和属性；因此，目前更新界面的唯一办法就是创建一个新的元素，然后使用方法ReactDOM.render(element, rootNode)来重新渲染。

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('example')
  );
}
 
setInterval(tick, 1000);

React 只会更新必要的部分

值得注意的是 React DOM 首先会比较元素内容先后的不同，而在渲染过程中只会更新改变了的部分。

---

３、JSX语法

3.1. 元素定义

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

var myDivElement = <div className="foo" />;

注意:

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

3.2. JavaScript 表达式
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中

ReactDOM.render(
    <div>
    {/*注释...*/}
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('example')
);

3.3. 样式
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}> hello world! </h1>,
    document.getElementById('example')
);

3.4. 数组
SX 允许在模板中插入数组，数组会自动展开所有成员：

var arr = [
  <h1>教程</h1>,
  <h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

---

４、组件

组件可以说是React的核心，下面我们来看一下组件的两种定义方式：
4.1. 使用函数定义组件

function HelloMessage(props) {
    return <h1>Hello World!</h1>;
}

4.2. 使用 ES6 class 定义组件

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

注意:
原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

4.3. 复合组件
一般一个应用都是由多个组件组成的，而组件之间式可以嵌套的，而由组件嵌套组成的单独一个组件就是复合组件

---

５、State(状态)