持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情
React Hello World
<div id="root"></div>
ReactDOM.render(
<h1>123</h1>,
document.getElementById('root')
)
jsx简介
嵌入表达式
const name = "jone"
const element = <h1>Hello, {name}</h1>
jsx,是一个javaScript的语法扩展,jsx可以很好的描述UI呈现出它应有交互的本质形式
元素渲染
React元素是创建开销极小的普通对象,React DOM会负责更新DOM来与React元素保持一致
想要将一个React元素渲染到根DOM节点中,只需要把它们一起传入React.DOM.render()
组件&props props的只读性
函数组件
function welcome(props) {
return <h1>hello,{props.name}</h1>
}
es6 class组件
class Welcome extends React.Component{
render() {
return<h1>hello,{this.props.name}</h1>
}
}
state&生命周期
state三件事
1.不要直接state, 应该使用setState
this.setState({comment: 'hello'})
2.state的更新可能是异步的
this.setState((state, props) => ({
counter: state.counter + props.increment
}))
3.state的更新会被合并
事件处理
React中不能通过返回false的方式阻止你的默认行为,必须显示的使用preventDefault
function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked');
}
return (
<a href="#" onclick={handleClick}>
click me
</a>
)
}
不绑定this, 可以在回调中使用箭头函数
状态提升
通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去
应当依靠自上而下的数据流,而不是尝试在不同组件间同步state
PureComponent
定制了shouldCompoentUpdate后的Compoent(浅比较)
class Comp extends React.PureComponent {
}
React.memo React16.6.0之后的版本,让函数式的组件也有pureComponent的功能
const Joke = React.memo(() => {
<div>
{this.props.value || 'loading...'}
</div>
})
Fragments key是唯一可以传递个Fragment的属性
有时,语义化的HTML会被破坏,比如当在jsx中使用<div>元素来实现React代码功能的时候,又或是在使用列表(<ol><ul>和<dl>)和HTML<table>时,这种情况下,我们应该使用React Fragmengts 来组合各个组件
无障碍表单 htmlfor
通过访问"current"来获得DOM节点
React.lazy和Suspense懒加载
