chili 默默学编程

React 技术栈(一):基本用法1


原文在此:

https://github.com/ruanyf/jstraining/blob/master/docs/react.md


React 是目前热门的前端框架。

    - Facebook 公司 2013 年推出

    - 现在最好的社区支持和生态圈

    - 大量的第三方工具


1、React 使用 JSX 语法,JavaScript 代码中可以写 HTML 代码

let myTitle = <h1>Hello, world!</h1>;

注意事项:

    - 最外层,只能有一个节点

// 错误
let myTitle = <p>Hello</p><p>World</p>;

    - 可以插入 JavaScript 代码,使用大括号

let myTitle = <p>{'Hello ' + 'World'}</p>


2、引入三个库

<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
// ** Our code goes here! **
</script>


3、使用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<span>Hello React!</span>,
document.getElementById('example')
);
</script>
</body>
</html>

ReactDOM.render 方法接受两个参数,一个是虚拟的 DOM 节点,一个是真实的 DOM 节点,作用是把虚拟的 DOM 挂载到真实的 DOM。


4、React 组件

可以自定义组件,插入网页规则如下:

    - 自定义组件的第一个字母必须大写,以便与内置组件区别

    - 每个组件必须有 render 方法

    - <MyTitle/> 表示生成一个组件类的实例,也可以写成<MyTitle></MyTitle>


例子:MyTitle

<script type="text/babel">
class MyTitle extends React.Component {
render() {
return <h1>Hello World</h1>;
}
};

ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
</script>


5、组件的参数

组件可以从外部传入参数,内部使用 this.props 获取参数。


例子:字体红色

<script type="text/babel">
class MyTitle extends React.Component {
render() {
return <h1 style={{color: this.props.color}}>Hello World</h1>;
}
};

ReactDOM.render(
<MyTitle color="red" />,
document.getElementById('example')
);
</script>


6、组件的状态

组件有内部状态,用 this.state 表示。

状态变动,会重新渲染组件。


例子:

<script type="text/babel">
class MyTitle extends React.Component {
constructor(...args) {
super(...args);
this.state = {
name: '访问者'
};
}

handleChange(e) {
let name = e.target.value;
this.setState({
name: name
});
}

render() {
return <div>
<input type="text" onChange={this.handleChange.bind(this)} />
<p>你好,{this.state.name}</p>
</div>;
}
};

ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
</script>

解释:

    - constructor 是组件的构造函数,创建实例时,调用一次

    - 其中的 “...args” 表示组件的参数,接受所有参数

    - 其中的 “this.state” 用来存放内部状态,这里定义初始状态

    - render 中的内容,就是渲染出来的样式

    - 其中 this.state.name 表示读取 this.state 的 name 属性

    - 其中 input 元素监听 onChange 事件,input 输入框有变动时会调用 handleChange 函数

    - 其中 .bind(this) 的作用,是把组件的 this 传入到函数中

    - handleChange 函数中 this.setState 是用来重置 this.state 的方法

    - 调用 this.setState 时,组件重新渲染


7、复杂的例子


<script type="text/babel">
var getToday = function() {
var d = new Date()
var date = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
return date
} class MyTitle extends React.Component {
constructor(...args) {
super(...args);
this.state = {
text: 'World',
isClicked: false,
};
}

handleClick() {
let isClicked = !this.state.isClicked
console.log(isClicked, this.state.isClicked);
this.setState({
isClicked: isClicked,
text: isClicked ? getToday() : 'World',
})

}

render() {
return <h1 onClick={this.handleClick.bind(this)}>
{'Hello ' + this.state.text}
</h1>;
}
};

ReactDOM.render(
<MyTitle/>,
document.getElementById('example')
);
</script>

解释:

    - 输出的页面,是一个 h1 标签的组件

    - h1 标签的内容,是 “Hello” + { this.state.text }

    - h1 标签的内容,初始值是 “Hello World”

    - 组件绑定了一个点击事件

    - 点击的时候,改变 this.state.isClicked 属性,并且根据属性的布尔值改变 this.state.text 值

    - text: isClicked ? getToday() : 'World' 是 React 里 this.setState 的 if 语句

    - getToday() 获取当前日期


(未完待续……)



reply ( 0 )