声明变量：
const element = <h1> Hello World </h1>;
这既不是字符串也不是HTML。它被称为JSX，是一个JS的语法扩展 。
在JSX中嵌入表达式:
const name = ‘yxz’;
const element = <h1>hello,{name}</h1> ;
ReactDOM.render{
element,
document.getElementById(‘root’);
};
声明变量用const，标签内引用变量用{}。JSX的标签内可以包含很多元素。
函数组件与class组件
function Xxx(props){
return <标签></标签>;
]
Class Xxx extends React.Component{
reder(){
return <标签></标签>;
}}
上面两种是等效的 。
渲染: ReactDOM.render(
xxxx,
Document.getElementById(‘xxx’)
);
setInterval(todo,time); // 可以计时器
Class组件可以使用局部的state，可以理解为内部类，与控件进行数据绑定。
componentDidMount 第一次进入加载（挂载）
componentWillUnmount 卸载
更新state数据
this.setState({
更新的数据
});
***********************新的一天 10.9 ***********************
点击事件的调用:
传统HTML onclick="activateLasers()"
react onClick={activateLasers}
屏蔽点击事件：
传统HTML onclick="console.log('The link was clicked.'); return false"
react
functionActionLink(){
functionhandleClick(e){
e.preventDefault();
console.log('The link was clicked.');
}
return(<ahref="#"onClick={handleClick}> Click me </a>);
}
JS class的方法默认不会绑定this。
class fields 绑定
class xxxx extends React.Component{
onClickA=()=>{
// Todo
}
render(){
return(
<xxxx onClick={this.onClickA}/>);
}
}
Create React App 默认启动方法：
class xxxx extends React.Component{
onClickA（）{
// Todo
}
render(){
return(
<xxxx onClick={(e)=>this.onClickA(e)}/>);
}
}
JS .map():
const numbers = [1, 2, 3, 4, 5];
const dd = numbers.map((numbers)=>numbers);
const ar = numbers.map(function(elem) {
// 对数组每一项进行操作
// 也可以将它包装成 return <li>{numbers}</li>
return elem*2;
});
在map()方法内为元素设置key
array.map(xx=>
<标签 key = {xx.xx}>
</标签>
)
表单数据
双向数据绑定 （用于登录、输入号码 ... ） 标签显示的数据与state绑定 ， 输入框去动态更新state 。
网友评论