react入门（1）之阮一峰react教程

阮一峰老师的github地址：React Demos

React 入门实例教程

1、HTML模板

<!DOCTYPE html>
<html><head>// react 核心库<script src="../build/react.js"></script>// react 操作 DOM 库<script src="../build/react-dom.js"></script>// 将 JSX 语法转化为 js 语法<script src="../build/browser.min.js"></script></head><body><div id="example"></div>// 使用 balel 解析jsx 语法<script type="text/babel">// ** Our code goes here! **</script></body>
</html>

2、ReactDOM.render()

ReactDOM.render(参数一, 参数二)
参数一：被渲染的标签
参数而：被插入的父元素

// ReactDOM.render() 将模板转化为 HTML 语言
ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example')
);

3、JSX 语法

var names = ['Alice', 'Emily', 'Kate'];ReactDOM.render(<div>{names.map(function (name) {return <div>Hello, {name}!</div>})}</div>,document.getElementById('example')
);

在参数一中，{}中可以键入javascript代码，可以用来遍历数组，对象等；在其中可以使用return来返回标签。

JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。

数组直接写在{}中就能遍历，如下：数组直接就遍历了，展开这个数组的所有成员。

var arr = [<h1 key="1">Hello world!</h1>,<h2 key="2">React is awesome</h2>,
];
ReactDOM.render(<div>{arr}</div>,document.getElementById('example')
);

4、组件

<div id="example"></div>
<script type="text/babel">class HelloMessage extends React.Component {render() {return <h1>Hello {this.props.name}</h1>;
        }}// 使用 this.props 接收组件标签的属性 是一个对象
ReactDOM.render(<HelloMessage name="John" />,
    document.getElementById('example')
);
</script>

组件类的第一个字母必须大写

组件类只能包含一个顶层标签

组件类必须有 / 结尾

所有组件类都必须有自己的 render 方法，用于输出组件

5、this.props.children

this.props.children：表示组件的所有子节点。

把NotesList下的所有子节点渲染到 ol li中

<div id="example"></div><script type="text/babel">class NotesList extends React.Component {render() {return (<ol>{React.Children.map(this.props.children, function (child) {return <li>{child}</li>;
                })}</ol>
          );}}// this.props.children 表示组件上的子节点
      ReactDOM.render(<NotesList><span>45645</span><span>hello</span><span>world</span></NotesList>,
        document.getElementById('example'));</script>

6、PropTypes

组件类的PropTypes属性，就是用来验证组件实例的属性是否符合要求

指定组件中的属性类型

  <div id="example"></div><script type="text/babel">var data = 123;class MyTitle extends React.Component {static propTypes = {title: PropTypes.string.isRequired,}render() {return <h1> {this.props.title} </h1>;
        }}ReactDOM.render(<MyTitle title={data} />,
        document.getElementById('example'));</script>

7、获取真实的DOM

1、组件并不是真实的DOM节点，而是存在于内存之中的一种数据结构，叫做虚拟DOM，只有插入到文档中才会变成真实的DOM。

2、组件 MyComponent 的子节点有一个文本输入框，用于用户输入，这时就必须获取真实的DOM节点，虚拟DOM是拿不到用户输入的数据的

　　为了做到这一点，文本输入框必须有一个ref属性，然后this.ref.[refName]就会返回这个真实的DOM节点。

　　需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

　　代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。

  <div id="example"></div><script type="text/babel">class MyComponent extends React.Component {constructor(props) {super(props);this.myTextInput = React.createRef();this.handleClick = this.handleClick.bind(this)}handleClick() {console.log('object');this.myTextInput.current.focus();}render() {return (<div><input type="text" ref={this.myTextInput} /><input type="button" value="Focus the text input" onClick={this.handleClick} /></div>
        );}}ReactDOM.render(<MyComponent />,
      document.getElementById('example'));</script>

8、this.state

 <div id="example"></div><script type="text/babel">class LikeButton extends React.Component {// 构造器创建 state
        constructor(props) {super(props)this.state = {liked: false}// p标签上的 方法this.handleClick = this.handleClick.bind(this)}handleClick(event) {// state 下的 liked 状态改变this.setState({ liked: !this.state.liked });}render() {var text = this.state.liked ? 'like' : 'haven\'t liked';return (<p onClick={this.handleClick}>You {text} this. Click to toggle.</p>
          );}}ReactDOM.render(<LikeButton />,
        document.getElementById('example'));</script>

状态改变渲染页面

上面代码是一个LikeButton组件，构造器函数定义 state 状态，这是一个对象，可以通过this.state属性读取，当用户点击组件时，状态改变，this.setState() 方法就修改状态值，每次修改以后，自动调用this.render方法，再次渲染组件。

由于 this.props 和 this.state 都用于描述组件的特性，可能会产生混淆。

一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。

9、表单

类似 vue 的双向绑定...

<div id="example"></div>
<script type="text/babel">class Input extends React.Component {constructor(props) {super(props)this.state = {value: 'Hello!'}this.handleChange = this.handleChange.bind(this)}handleChange(event) {// 设置 input 的值this.setState({ value: event.target.value });}render() {var value = this.state.value;return (<div><input type="text" value={value} onChange={this.handleChange} /><p>{value}</p></div>
            );}}ReactDOM.render(<Input/>, document.getElementById('example'));
</script>

10、组件的生命周期

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

Mounting: 一插入真实的DOM
Updating: 正在被重新渲染
Unmounting: 以移除真实 DOM

React为每一个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount() 组件挂载之前调用，render()之前调用
componentDidMount()  DOM渲染完成后调用，可以用于加载后台数据
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)  组件更新时触发该方法，初始渲染不调用
componentWillUnmount()  组件被销毁之前一般用于清理工作（定时器timer、网络请求、订阅事件）

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

例子

<div id="example"></div>
<script type="text/babel">class Hello extends React.Component {constructor(props) {super(props)this.state = {opacity: 1.0};}// 已插入真实 DOM 函数在进入状态之后调用
        componentDidMount() {this.timer = setInterval(function () {// 将状态机的变量赋值给 opacityvar opacity = this.state.opacity;// 定时 -0.05
                opacity -= .05;if (opacity < 0.1) {opacity = 1.0;}// 重新赋值给 statethis.setState({opacity: opacity});}.bind(this), 100);}render() {return (<div style={{opacity: this.state.opacity}}>Hello {this.props.name}</div>
            );}}// 添加到 DOM 中
ReactDOM.render(<Hello name="world"/>,
    document.getElementById('example')
);
</script>

11、Ajax

使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI

使用 jQuery 完成 Ajax 请求

  <div id="example"></div><script type="text/babel">class UserGist extends React.Component {constructor(props) {super(props)this.state = {username: '',lastGistUrl: ''}}componentDidMount() {$.get(this.props.source, function(result) {var lastGist = result[0];this.setState({username: lastGist.owner.login,lastGistUrl: lastGist.html_url});}.bind(this));}render() {return (<div>{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>.</div>);}}ReactDOM.render(<UserGist source="https://api.github.com/users/octocat/gists" />,document.getElementById('example'));</script>

转载于:https://www.cnblogs.com/houfee/p/10772301.html