Posted on | In

React TodoList

todolist

一个简单的todolist demo。

创建了两个components TodoList 和Task

练习了一下props state

可以添加 删除 或 清理list

Posted on | In

React 生命周期方法概览

看了官方文档，简单讲就是mount update 和 unmount 三个大周期下可以调用若干生命周期函数钩子来在对应的生命周期执行某些操作。

生命周期

主要的生命周期方法包括

1
2
3
4
5
6
7
8
9
10
11
12
13
14

componentWillMount()

componentDidMount()

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

componentDidUpdate()

componentWillUnmount()

freecodecamp 里有一个经典的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//mount完成， 加入事件监听
 componentDidMount() {
   document.addEventListener("keydown",this.handleKeyPress)
 }
  //将要unmount，注销事件监听
 componentWillUnmount() {
   document.removeEventListener("keydown",this.handleKeyPress)
 }
 // change code above this line
 handleEnter() {
   this.setState({
     message: this.state.message + 'You pressed the enter key! '
   });
 }
 handleKeyPress(event) {
   if (event.keyCode === 13) {
     this.handleEnter();
   }
 }

还有一个shouldComponentUpdate()的例子，这个方法返回true／false来决定组件是否update

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
shouldComponentUpdate(nextProps, nextState) {
   console.log('Should I update?');
    //例子为当value为偶数才更新
    if(nextProps.value%2==0){
      return true
      }else{
        return false
        }

 }
 componentWillReceiveProps(nextProps) {
   console.log('Receiving new props...');
 }
 componentDidUpdate() {
   console.log('Component re-rendered.');
 }

Conditional rendering

这个其实就是在render里使用if／else && 或三元运算来进行判断，决定渲染与否以及渲染内容

写完条件判断以后根据state来有条件的渲染。

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
38
39
40
41
42
43
44
45
46
47
48

const inputStyle = {
  width: 235,
  margin: 5
}

class CheckUserAge extends React.Component {
  constructor(props) {
    super(props);
    // change code below this line
    this.state={
      input:'',
      userAge:''
    }
    // change code above this line
    this.submit = this.submit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      input: e.target.value,
      userAge: ''
    });
  }
  submit() {
    this.setState({
      userAge: this.state.input
    });
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;
    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        {
          this.state.userAge==''? buttonOne:this.state.userAge<18?buttonThree:buttonTwo
        }
      </div>
    );
  }
};

freecodecamp 里依据state.userAge 渲染不同按钮的例子。

Posted on | In

创建一个基本的react 组件

首先使用ES6 class 语法建立简单的Component。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return <div>
                  <h1>My React Component</h1>  
              </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

props的使用

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
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return <div>
                  <Presenter name="lvino"/>  
              </div>
    }
}

const Presenter = (props)=>{
    render(){
        return <div>
                 <p>{this.props.name}</p>
                </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

可以看到在无状态组件Presenter中通过props调用了父组件中设定好的name。
可以通过

1
2
3
Presenter.defaultProps{
    name: "lvino"
}

来设定默认的props

还可以通过

1
2
3
Presenter.propTypes{
    name: PropTypes.number.isRequired
}

来设定prop要求的类型，更多的API在官方文档中有

state的使用

在组件中定义state十分简单

1
2
3
4
this.state={
    name: "lvino",
    count: 0
}

父组件和子组件中通过state和prop可以进行数据的交互，一个简单的sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return <div>
                  <h1>My React Component</h1>  
              </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

简单的组件间通信

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
38
39
40
41
42
43
44
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }
    //建立state
    this.state={
    name: "lvino",
    count: 0
}
    //绑定this到本组件
    this.handleClick = this.handleClick.bind(this);
    //javascript 交互函数
    handleClick(){
        this.setState({
            count: this.state.count+1
        })
    }

    render(){
        return <div>
                {/*state 传递数据及函数给子组件*/}
                  <Presenter name={this.state.name} count={this.state.count handleClick={this.handleClick}}/>  
              </div>
    }
}

const Presenter = (props)=>{
    render(){
        return <div>
                {/*子组件使用props展现数据，以及调用函数*/}
                
                 <p>{this.props.name} {this.props.count}</p>
                 <button onClick={this.props.handleClick}></button>
                </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

关键点在于涉及组件状态的改变一律使用setState()

Posted on | In

基础的 jquery 选择器及API

标签选择器，类选择器，ID选择器及一些api的例子

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
$(document).ready(function() {
    $("#target1").css("color", "red");
    //id选择器  更改css属性

    $("#target1").prop("disabled", true);
    //id选择器 禁用按钮 

    $("#target4").remove();
    //移除标签
    
    $("#target2").appendTo("#right-well");
    //插入标签
    
    $("#target5").clone().appendTo("#left-well");
    //克隆 并插入
    
    $("#target1").parent().css("background-color", "red");
    //标签父选择器 

    $("#right-well").children().css("background-color","orange");
    //标签子选择器

    
    $(".target:nth-child(2)").addClass("animated bounce");
    //选取父选择器的子标签    

    $(".target:even").addClass("animated shake");
    //选取父选择器下偶数标签

    $("body").addClass("animated fadeOut hinge");
    //选取body标签    

  });

Posted on | In

基础的Bootstrap概念

container container-fluid

1
2
3
<div class="container-fluid">
.....
</div>

定义div下为container
区别：固定宽度或满屏幕宽度

grid 布局：row

1
2
3
4
<div class="row">
   <div class="col-**-*"></div>
   <div class="col-**-*"></div>
</div>

row分为12 columns，五个等级

xs sm md lg xl
<576 >576 >768 >992 >1200

对应不同的viewport来进行不同的布局，例如：

1
2
3
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">
                        
</div>

Posted on | In

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

基础的Hexo命令

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

Markdown基本语法