React TodoList
一个简单的todolist demo。
创建了两个components TodoList 和Task
练习了一下props state
可以添加 删除 或 清理list
看了官方文档,简单讲就是mount update 和 unmount 三个大周期下可以调用若干生命周期函数钩子来在对应的生命周期执行某些操作。
主要的生命周期方法包括
1 |
|
freecodecamp 里有一个经典的例子
1 | //mount完成, 加入事件监听 |
还有一个shouldComponentUpdate()
的例子,这个方法返回true/false来决定组件是否update
1 | shouldComponentUpdate(nextProps, nextState) { |
这个其实就是在render里使用if/else && 或三元运算来进行判断,决定渲染与否以及渲染内容
写完条件判断以后根据state来有条件的渲染。
1 |
|
freecodecamp 里依据state.userAge 渲染不同按钮的例子。
首先使用ES6 class 语法建立简单的Component。
1 | class MyComponents extends React.Component{ |
1 | class MyComponents extends React.Component{ |
可以看到在无状态组件Presenter中通过props调用了父组件中设定好的name。
可以通过
1 | Presenter.defaultProps{ |
来设定默认的props
还可以通过
1 | Presenter.propTypes{ |
来设定prop要求的类型,更多的API在官方文档中有
在组件中定义state十分简单
1 | this.state={ |
父组件和子组件中通过state和prop可以进行数据的交互,一个简单的sample
1 | class MyComponents extends React.Component{ |
1 | class MyComponents extends React.Component{ |
关键点在于涉及组件状态的改变一律使用setState()
1 | $(document).ready(function() { |
1 | <div class="container-fluid"> |
定义div下为container
区别:固定宽度或满屏幕宽度
1 | <div class="row"> |
row分为12 columns,五个等级
xs | sm | md | lg | xl |
---|---|---|---|---|
<576 | >576 | >768 | >992 | >1200 |
对应不同的viewport来进行不同的布局,例如:
1 | <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> |
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.
1 | $ hexo new "My New Post" |
More info: Writing
1 | $ hexo server |
More info: Server
1 | $ hexo generate |
More info: Generating
1 | $ hexo deploy |
More info: Deployment