react-笔记三（基本语法和规则）

React 基础知识介绍

hello world

import React from 'react'
import { render } from 'react-dom'

// 定义组件
class Hello extends React.Component {
render() {
// return 里面写jsx语法
return (
<p>hello world</p>
)
}
}

// 渲染组件到页面
render(
<Hello/>,
document.getElementById('root')
)

import React from 'react'

'react'

./package.json

dependencies

'react'

npm install

./node_modules/react

./node_modules/react/package.json

"main": "react.js",

main

./node_modules/react/react.js

jsx 语法

使用一个父节点包裹

// 三个 <p> 外面必须再包裹一层 <div>
return (
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
)

// { } 中返回的两个 <p> 也要用 <div> 包裹
return (
<div>
<p>段落1</p>
{
true
? <p>true</p>
: <div>
<p>false 1</p>
<p>false 2</p>
</div>
}
</div>
)

注释

{/*  */}

return (
// jsx 外面的注释
<div>
{/* jsx 里面的注释 */}
<p>hello world</p>
</div>
)

样式

<p className="class1">hello world</p>

className

class

<p style={{display: 'block', fontSize: '20px'}}>hello world</p>

{{...}}

fontSize

事件

class Hello extends React.Component {
render() {
return (
<p onClick={this.clickHandler.bind(this)}>hello world</p>
)
}

clickHandler(e) {
// e 即js中的事件对象，例如 e.preventDefault()
// 函数执行时 this 即组件本身，因为上面的 .bind(this)
console.log(Date.now())
}
}

onClick

.bind(this)

循环

Array.prototype.map

class Hello extends React.Component {
render() {
const arr = ['a', 'b', 'c']
return (
<div>
{arr.map((item, index) => {
return <p key={index}>this is {item}</p>
})}
</div>
)
}
}

arr.map

{}

key={index}

{}

判断

{}

return (
<div>
<p>段落1</p>
{
true
? <p>true</p>
: <p>false</p>
</div>
}
</div>
)

<p style={{display: true ? 'block' ? 'none'}}>hello world</p>

代码分离

page 层

./app/containers/Hello/index.jsx

import React from 'react'

class Hello extends React.Component {
render() {
return (
<p>hello world</p>
)
}
}

export default Hello

./app/index.jsx

import Hello from './containers/Hello';

render(
<Hello/>,
document.getElementById('root')
)

import Hello from './containers/Hello';

./containers/Hello/index.jsx

./containers/Hello/index

subpage 层

Hello

./app/containers/Hello/subpage

Carousel.jsx

Recommend.jsx

List.jsx

./app/containers/Hello/index.js

import Carousel from './subpage/Carousel'
import Recommend from './subpage/Recommend'
import List from './subpage/List'

class Hello extends React.Component {
render() {
return (
<div>
<p>hello world</p>
<hr/>
<Carousel/>
<Recommend/>
<List/>
</div>
)
}
}

import

.jsx

component 层

page

subpage

page

subpage

./app/components/Header/index.jsx

./app/containers/index.jsx

import Header from '../../components/Header'

class Hello extends React.Component {
render() {
return (
<div>
<Header/>
{/* 省略其他内容 */}
</div>
)
}
}

./app/components

数据传递 & 数据变化

props

<Header title="Hello页面"/>

render() {
return (
<p>{this.props.title}</p>
)
}

props && state

state

class Hello extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
// 显示当前时间
now: Date.now()
}
}
render() {
return (
<div>
<p>hello world {this.state.now}</p>
</div>
)
}
}

state

props

class Hello extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
// 显示当前时间
now: Date.now()
}
}
render() {
return (
<div>
<p onClick={this.clickHandler.bind(this)}>hello world {this.state.now}</p>
</div>
)
}
clickHandler() {
// 设置 state 的值的时候，一定要用 this.setState ，不能直接赋值修改
this.setState({
now: Date.now()
})
}
}

智能组件 & 木偶组件

./app/containers

./app/components

生命周期

getInitialState

class Hello extends React.Component {
constructor(props, context) {
super(props, context);
// 初始化组件 state 数据
this.state = {
now: Date.now()
}
}
}

render

comopentDidMount

shouldComponentUpdate

componentDidUpdate

componentWillUnmount

setTimeout