React笔记入门

React元素渲染：

 

React 特点：

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

1. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

 

一、安装：

可以直接使用 Staticfile CDN 的 React CDN 库，地址如下：

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

<!-- 生产环境中不建议使用 -->

<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

 

官方提供的 CDN 地址：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<!-- 生产环境中不建议使用 -->

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

 

实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 babel.min.js：

1. react.min.js - React 的核心库
2. react-dom.min.js - 提供与 DOM 相关的功能
3. babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。。

 

 

二、元素渲染：

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。

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

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

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

<script type="text/babel">

ReactDOM.render(

    <h1>Hello, world!</h1>,

    document.getElementById('example')

);

</script>

 

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

<script type="text/babel">

function tick() {

  const element = (

    <div>

      <h1>Hello, world!</h1>

      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>

    </div>

  );

  ReactDOM.render(

    element,

    document.getElementById('example')

  );

}



setInterval(tick, 1000);

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

<script type="text/babel">

function Clock(props) {

  return (

    <div>

      <h1>Hello, world!</h1>

      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>

    </div>

  );

}



function tick() {

  ReactDOM.render(

    <Clock date={new Date()} />,

    document.getElementById('example')

  );

}



setInterval(tick, 1000);

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

<script type="text/babel">

class Clock extends React.Component {

  render() {

    return (

      <div>

        <h1>Hello, world!</h1>

        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>

      </div>

    );

  }

}

​

function tick() {

  ReactDOM.render(

    <Clock date={new Date()} />,

    document.getElementById('example')

  );

}

​

setInterval(tick, 1000);

 

• JSX:

1. JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
2. JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
3. React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：
4. 注释需要写在花括号中
5. JSX 允许在模板中插入数组，数组会自动展开所有成员：

 

• 组件：

1、我们可以使用函数定义了一个组件：

function HelloMessage(props) {

    return <h1>Hello World!</h1>;

}

你也可以使用 ES6 class 来定义一个组件:

 

class Welcome extends React.Component {

  render() {

    return <h1>Hello World!</h1>;

  }

}

向组件传递参数：

需要向组件传递参数，可以使用 this.props 对象,实例如下：

function HelloMessage(props) {

    return <h1>Hello {props.name}!</h1>;

}

const element = <HelloMessage name="Runoob"/>;



ReactDOM.render(

    element,

    document.getElementById('example')

);

 

五、状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

以下实例创建一个名称扩展为 React.Component 的 ES6 类，在 render() 方法中使用 this.state 来修改当前的时间。添加一个类构造函数来初始化状态 this.state，类组件应始终使用 props 调用基础构造函数。

 

将生命周期方法添加到类中

在具有许多组件的应用程序中，在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。

同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。

 

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

 

Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。

 

六、React 事件处理

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

 

1. React 事件绑定属性的命名采用驼峰式写法，而不是小写。
2. 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)

 

HTML 通常写法是：

<button οnclick="activateLasers()">

  激活按钮

</button>

 

React 中写法为：

<button onClick={activateLasers}>

  激活按钮

</button>

 

传参数的时候：

this.方法名.bind(this,要传的参数)

方法名（传过来的参数，event）

• 生命周期：

组件的生命周期可分成三个状态：

1. Mounting：已插入真实 DOM
2. Updating：正在被重新渲染
3. Unmounting：已移出真实 DOM

生命周期的方法有：

 

1. componentWillMount 在渲染前调用,在客户端也在服务端。
2. componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
3. componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
4. shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
5. 可以在你确认不需要更新组件时使用。
6. componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
7. componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
8. componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

 

• 常用API：

1. 设置状态：setState
2. 替换状态：replaceState
3. 设置属性：setProps
4. 替换属性：replaceProps
5. 强制更新：forceUpdate
6. 获取DOM节点：findDOMNode
7. 判断组件挂载状态：isMounted

 

快速构建开发环境：

$ cnpm install -g create-react-app

$ create-react-app my-app

$ cd my-app/

$ npm start