环境准备

创建项目



npx create-react-app my-react



进入项目并启动



cd my-react && npm start

1

src/index.js

先把src里面的东西全部删掉，重写了index.js



import React from 'react';

import ReactDOM from 'react-dom';



class App extends React.Component{

render(){

return (

<div>Hellow, World</div>

)

}

}



ReactDOM.render(<App/>, document.getElementById('root'));



JSX

一个React组件中，render方法中return出去的内容就是这个组件将要渲染的内容，然后Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。



React.createElement(

  'div',

  {},

  'Hello, World'

)



React.createElement() 接收三个参数：

第一个参数是必填，传入的是似HTML标签名称: ul, li, div;

第二个参数是选填，表示的是属性: className;

第三个参数是选填, 子节点: 要显示的文本内容;

React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：



// 注意：这是简化过的结构

const element = {

  type: 'div',

  props: {

    className: '',

    children: 'Hello, world!'

  }

};



元素渲染

与浏览器的 DOM 元素不同，React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

想要将一个 React 元素渲染到根 DOM 节点中，只需把它们一起传入 ReactDOM.render()：



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

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



render方法接收两个参数，第一个参数为我们的 React 根级组件，第二个参数接收一个 DOM 节点，代表我们将把和 React 应用挂载到这个 DOM 节点下，进而渲染到浏览器中。



组件 & props

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

函数组件：



function Welcome(props){

renter (

<h1> Hello, {props.name} </h1>

)

}

<Welcome name="World"/>



该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”（代表属性）对象与并返回一个 React 元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。

class组件：



class Welcome extends React.Component {

render(){

renter (

<h1> Hello, {thhis.props.name} </h1>

)

}

}

<Welcome name="World"/>



组件名称必须以大写字母开头。

组件无论是使用函数声明还是通过 class 声明，都决不能修改自身的 props。



State & 生命周期

State 与 props 类似，但是 state 是私有的，并且完全受控于当前组件。



class Clock extends React.Component {

constructor(props){

super(props)

this.state = {

date : new Date()

}

}

componentDidMount() {

//这里是Clock组件第一次被渲染到DOM时会调用，也就是挂载

}



componentWillUnmount() {

//当DOM组件Clock被删除时，会调用，也就是卸载

}

render(){

return (

<div>

<h1>Hello, World</h1>

<h2>It's {this.state.date.toLocaleTimeString()}</h2>

</div>

)

}

}



修改state中数据：



class Clock extends React.Component {

constructor(props){

super(props)

this.state = {

date: new Date()

}

}

componentDidMount() {

//这里是Clock组件第一次被渲染到DOM时会调用，也就是挂载

this.timer = setInterval(()=>{

this.tick()

},1000)

}



tick(){

this.setState({

date: new Date()

})

}



componentWillUnmount() {

//当DOM组件Clock被删除时，会调用，也就是卸载

clearInterval(this.timer)

}

render(){

return (

<div>

<h1>Hello, World</h1>

<h2>It's {this.state.date.toLocaleTimeString()}</h2>

</div>

)

}

}



不要直接修改 State,构造函数是唯一可以给 this.state 赋值的地方



this.setState({name: 'World'})

1

State 的更新可能是异步的,要解决这个问题，可以让setState接受一个函数而不是一个对象，这个函数用上一个 state 作为第一个参数，将此次更新被应用时的 props 做为第二个参数：



this.setState((state, props) => ({

  counter: state.counter + props.increment

}));



事件处理

React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

在 React 中一个不同点是你不能通过返回 false 的方式阻止默认行为。你必须显式的使用 preventDefault 。例如，传统的 HTML 中阻止链接默认打开一个新页面，你可以这样写：



<a href="#" onclick="console.log('The link was clicked.'); return false">

  Click me

</a>



在 React 中，可能是这样的：



function ActionLink() {

  function handleClick(e) {

    e.preventDefault();

    console.log('The link was clicked.');

  }



  return (

    <a href="#" onClick={handleClick}>

      Click me

    </a>

  );

}



class函数中绑定this



class LoggingButton extends React.Component {

  handleClick() {

    console.log('this is:', this);

  }



  render() {

    // 此语法确保 handleClick 内的 this 已被绑定。

    return (

      <button onClick={() => this.handleClick()}>

        Click me

      </button>

    );

  }

}



在循环中，通常我们会为事件处理函数传递额外的参数



<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

1

2

列表和key



function ListItem(props) {

  return <li>{props.value}</li>;

}



function NumberList(props) {

  const numbers = props.numbers;

  const listItems = numbers.map((number) =>

    <ListItem key={number.toString()}  value={number} />

  );

  return (

    <ul>

      {listItems}

    </ul>

  );

}



const numbers = [1, 2, 3, 4, 5];

ReactDOM.render(

  <NumberList numbers={numbers} />,

  document.getElementById('root')

);



语法

在 JSX 中所有的属性都要更换成驼峰式命名，比如 onclick 要改成 onClick，唯一比较特殊的就是 class，因为在 JS 中 class 是保留字，我们要把 class 改成 className 。