逍遥阁

React学习笔记

关键词: React

React学习笔记

###开发阶段引入的文件

```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
```

###生产环境阶段引入的文件

```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
```

###JSX

```
const element = <h1>test</h1>;
```

这种有趣的标签语法，它既不是一个字符串，又不是HTML，我们叫它JSX

JSX遇到`<`就按HTML规则解析，遇到`{`就按JavaScript规则解析

在JSX中可以通过`{}`包裹任意的JavaScript表达式

JSX表达式编译后就是JavaScript的对象类型结构，所以可以和JavaScript很好地融合

JSX给标签的属性值赋值的时候如果用引号包含起来会被当成字符串，如果要用JavaScript表达式直接用`{}`，两端不要用引号包裹

标签的`class`属性要写成`className`，`for`属性要写成`htmlFor`，因为`class`和`for`是JavaScript的保留字

标签的`tabindex`属性要写成`tabIndex`，因为JSX要求驼峰命名

标签里面可以通过`{变量}`直接显示变量的值，如`<h1>{title}</h1>`

定义组件(又叫标签)时通过`props`传递组件的属性，`props`是只读的，并且组件名首字母大写

组件必须只有一个根元素

###基本用法

```
ReactDOM.render(
    <h1>test</h1>,
    document.getElementById('root')
);
```

###通过function定义组件

```
function Tag(props){
    return <h1>{props.name}</h1>;
}
```

如果不引用属性值，参数`props`可以不写

###通过class定义组件

```
class Tag extends React.Component {
    render() {
        return <h1>{this.props.name}</h1>;
    }
}
```

###通过createClass定义组件

```
var Tag = React.createClass({
    propTypes: {
        title: React.PropTypes.string.isRequired
    },
    getDefaultProps : function(){
        return {
            title : ''
        };
    },
    getInitialState: function(){
        return {
            name: "1234"
        };
    },
    tempFunction: function(event){
        console.log(this.refs.name);
        console.log(event.target.value);
    },
    render: function(){
        return <h1 ref="name" onClick={this.tempFunction}>{this.props.name}</h1>;
    }
});
```

###使用定义过的组件

```
ReactDOM.render(
    <Tag name="1234"/>,
    document.getElementById('root')
);
```

###组件组合

```
function BTag(props){
    return <h1>{props.name}</h1>;
}

function ATag(){
    return (
        <div>
            <BTag name="1" />
            <BTag name="2" />
            <BTag name="3" />
        </div>
    );
}

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

###组件的生命周期函数

componentWillMount() 将插入真实DOM

componentDidMount() 已经插入真实DOM

componentWillUpdate(object nextProps, object nextState) 将重新渲染

componentDidUpdate(object prevProps, object prevState) 已经重新渲染

componentWillUnmount() 已经移出真实DOM

componentWillReceiveProps(object nextProps) 已加载组件收到新的参数

shouldComponentUpdate(object nextProps, object nextState) 组件判断是否重新渲染

###state

1.不能通过如下的方式直接修改状态

`this.state.name = '';`

应该用

`this.setState({name: ''});`

2.唯一能够直接赋值给`state`变量的地方是`constructor`函数里面

3.如果state或者props是被异步更新的，需要这样修改状态

```
this.setState((prevState, props) => ({}));
/*即*/
this.setState(function(prevState, props){
    return {};
});
```

###props

1.props对象的属性与组件的属性一般是一一对应，但是有一个例外，就是children属性表示组件的所有子节点

###{{}}与{}的区别

```
<h1 style={{name: "1234"}}></h1>
```

第一重大括号表示这是JavaScript语法，第二重大括号表示对象

###动态显示时间的例子

```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>code</title>
<script src="dev/react.js"></script>
<script src="dev/react-dom.js"></script>
<script src="dev/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class Tag extends React.Component {

constructor(props){
        super(props);
        this.state = {
            date: new Date()
        };
    }

componentDidMount(){
        this.tempHandle = setInterval(
            () => this.tempRefresh(),
            1000
        );
    }

componentWillUnmount(){
        clearInterval(this.tempHandle);
    }

tempRefresh(){
        this.setState({
            date: new Date()
        });
    }

render(){
        return (
            <div>
                <h3>{this.state.date.toLocaleTimeString()}</h3>
            </div>
        );
    }
}

ReactDOM.render(
    <Tag />,
    document.getElementById('root')
);
</script>
</body>
</html>
```

admin
2017-02-09 18:59:23
javascript

文章分类

文章标签

文章归档

友情链接

React学习笔记