viviier

React 入门实例(ruanyifeng)

发表于

一、Hello World

1
2
3
4
5
6
const { render } = ReactDOM;
render(
  <h1>Hello, world</h1>,
  document.getElementById('root')
)

二、JSX语法

1
2
3
4
5
6
7
8
9
10
11
12
let names = ['Alice', 'Emily', 'Kate'];
render(
  <div>
    {
    names.map(name => {
      return <p>hello {name}</p>
    })
      }
    </div>,
  document.getElementById('root')
)

三、组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { Component } = React;
class HelloMessage extends Component {
  render() {
    return (
      <h1>Hello {this.props.name}</h1>
    )
  }
}
render(
  <HelloMessage name='nico' />,
  document.getElementById('root')
)

四、this.props.children

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const { Component, Children } = React;
class HelloMessage extends Component {
  render() {
    return (
      <ol>
        { Children.map(this.props.children, child=> <li>{child}</li>)}    // Array.prototype.map(this.props.children, fn())
       </ol>
    )
  }
}
render(
  <HelloMessage>
    <span>hello</span>
    <span>world</span>
    </HelloMessage>,
  document.getElementById('root')
)

五、defaultProps

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class HelloMessage extends Component {
  static defaultProps = {
    name: 'nico'
  };
  render = () => (
    <h1>Hello {this.props.name}</h1>
  );
}
render(
<HelloMessage />,
  document.getElementById('root')
)

六、获取真实的节点

1
2
3
4
5
6
7
8
9
10
11
12
13
class HelloMessage extends Component {
 handlerClick = ()=> {
  console.log(this.input.value) 
 };
render = ()=>(
    <div>
      <input ref={node=>this.input=node} />
      <button onClick={this.handlerClick}>
        Clickme
      </button>
      </div>
  );
}

七、state

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class HelloMessage extends Component {
    state = {
      liked: false
   };
  handleClick = ()=> {
    this.setState({
      liked: !this.state.liked
    })
  };
  
render = (text=this.state.liked? 'like' : 'don\'t like')=>(
    <p onClick={this.handleClick}>
    you {text} this.click to toggle
  </p>
  );
}

八、表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class HelloMessage extends Component {
  state = {
    value: 'hello'
  };
handleChange = (e)=> {
  this.setState({
    value: e.target.value
  })
};
render = (value=this.state.value)=> (
  <div>
    <input type='text' onChange = {this.handleChange} />
    <p>{value}</p>
    </div>
);
}

九、组件生命周期

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class HelloMessage extends Component {
  state = {
    opacity: 1.0
  };
  componentDidMount = ()=> {
    this.timer = setInterval(()=>{
      let opacity = this.state.opacity;
      opacity -= .05;
       if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }, 100)
  };
  render=()=> (
    <div style={{ opacity: this.state.opacity}} >
      Hello {this.props.name}
      </div>
  );
}
/* 关于componentWillMount */
// The ES5 way
var EmbedModal = React.createClass({
  componentWillMount: function() { … },
});
// The ES6+ way
class EmbedModal extends React.Component {
  constructor(props) {
    super(props);
    // Operations usually carried out in componentWillMount go here
  }
}

Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
class UserGist extends Component {
  state = {
    username: '',
    lastGistUrl: ''
  };
  
  componentDidMount = () => {
    $.get(this.props.source, (result) => {
    let lastGist = result[0];
      this.setState({
        username: lastGist.owner.login,
        lastGistUrl: lastGist.html_url
      })
    })
  };
/* isMOunt()废弃后的解决方案 当异步加载数据的时候，使用 componentWillUnmount 来取消任何未完成的请求 在组件卸载之前 */
componentWillUnmount = () => {  
    this.serverRequest.abort();  
  };
render = ()=>(
  <div>
    {this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a>
    </div>
);
}
render(
  <UserGist source="https://api.github.com/users/octocat/gists" />,
  document.body
)
------本文结束感谢阅读------