React-组件化开发之路(三)

Component Styles

你可以在render函数返回的HTML标签中添加style属性来增加组件的样式:

这里给h1标签添加一个字体大小样式,这里的样式注意不要写在render函数外面,在看看效果:

这样就为组件完成了样式设置,这里的样式按照小写驼峰式,和原生js设置样式没有区别。

Component State

组件状态,组件可以根据用户的某些操作来改变状态,列如通过点击、hover之类的事件行为来进行操作:

这里增加了几个东西,getInitialState、handleClick,两个函数,从语义上来看大致可以清楚都是做什么的

  • getInitialState => 初始化State,React应该会获得此函数返回的对象来初始化state的值
  • handleClick => 处理点击事件

这里有写地方需要注意:

  • render函数返回的标签不允许出现一个以上的顶级父标签,所以这里使用了一个div作为父标签
  • 在其中绑定事件的时候需要小写驼峰式

这里应该很清楚了,给button标签绑定了一个事件,这个事件会设置state,如果设置的值已经存在就会覆盖,不存在则创建。
这里做了自增操作,每次点击按钮都会让state中的count变量值+1,看看效果:

Component Props

Props在上一节已经说了,和state相似,但是如果要设置值的话,只能在父组件中设置,这是一个组件嵌套的例子:

这里可以看出来,在Parent组件中嵌套了一个子组件,这里有个值,是props中的value变量,在render函数写入DOM的时候,指定了value的值。
父组件把值也传递给了子组件,子组件得到值进行显示,如果该组件也嵌套了组件,那么同样传递,循环往复,看看效果:

Component 生命周期

常用的生命周期方法有:

  • componentWillMount 在组件加载之前调用
  • componentDidMount 在组件加载之后调用
  • componentWillReceiveProps 组件中的Props更新之后被调用
  • shouldComponentUpdate 返回一个boolean值,组件中的props | state更新时调用
  • componentWillUpdate 组件中props|state更新时,但是还没有写入的时候调用
  • componentDidUpdate props|state更新写入之后被调用
  • componentWillUnmount 组件从DOM中移除的时候被调用

Chrome React 插件

facebook有开发一款方便开发者调试React的Chrome插件,叫做React Developer Tools
Github: https://github.com/facebook/react-devtools

React Component API

React提供了一些函数用来去设置组件的信息,这些函数包括上面的setState。
setState => 设置状态
填入一个对象和一个函数(可选),例:

1
2
3
4
5
6
7
8
setState({
value: 1
//填入一个新的对象,值会和原来的state合并
//如果不存在则创建该值
},function() {
console.log('setState execute success.');
//此函数在setStatee执行完成,已经写入组件之后调用
});


replaceState => 替换状态
填入一个对象和一个函数(可选),例:

1
2
3
4
5
6
replaceState({
value: 1 //填入一个新的对象,值会替换掉原来state的值
},function() {
console.log('replaceState execute success.');
//此函数在replaceState执行完成,已经写入组件之后调用
});


setProps => 设置属性
填入一个对象和一个函数(可选),例:

1
2
3
4
5
6
setProps({
value: 1 //填入一个新的对象,值会和原来的props合并
},function() {
console.log('setProps execute success.');
//此函数在setProps执行完成,已经写入组件之后调用
});


replaceProps => 替换属性
填入一个对象和一个函数(可选),例:

1
2
3
4
5
6
replaceProps({
value: 1 //填入一个新的对象,值会替换掉原来props的值
},function() {
console.log('replaceProps execute success.');
//此函数在replaceProps执行完成,已经写入组件之后调用
});


forceUpdate => 强制更新组件
填入一个函数(可选),例:

1
2
3
4
forceUpdate(function() {
console.log('forceUpdate execute success.');
//此函数在forceUpdate执行完成,已经写入组件之后调用
});


findDOMNode => 获得DOM节点
例:

1
2
DOMElement findDOMNode()
//如果组件已经加载到了DOM中,该方法就会返回解析过后的DOM元素


isMounted => 判断组件加载状态
例:

1
2
bool isMounted()
//返回true表示组件以及加载到了DOM中,false则反之

0%